原文:HTML Canvas 鼠标画图
原文来自:http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app(已被墙)
译文: http://fatkun.com/2011/02/html5-canvas-paint.html
我也不打算全部翻译了…大部分也看的懂,就算看不懂,代码也能看懂….o(╯□╰)o原谅我非常懒…很久没写博客了.
——————-以下是一个简单的例子————————————-
html容器
首先，准备个容器,也就是画板了。
<canvas id="canvasInAPerfectWorld" width="490" height="220"></canvas> |
但是，由于IE部分版本还是不支持HTML5，那我们可以借用exCanvas兼容IE..
<div id="canvasDiv"></div> |
初始化js代码
如果你不管IE使用第一种方法
context = document.getElementById('canvasInAPerfectWorld').getContext("2d");
|
为了兼容IE，不得不使用下面这个方法，创建一个canvas，然后使用excanvas初始化。当然，为了IE兼容，你需要针对IE加上exCanvas.js
var canvasDiv = document.getElementById('canvasDiv');
canvas = document.createElement('canvas');
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);
if(typeof G_vmlCanvasManager != 'undefined') {
canvas = G_vmlCanvasManager.initElement(canvas);
}
context = canvas.getContext("2d");
|
开始一个简单的画板
在开始之前，说说怎么做先。它包含了四个鼠标事件和两个方法。addClick是为了记录鼠标的移动点，redraw是把记录的数据画出来。 (提一下，由于原作者使用了jquery，所以你也要把jquery引用进来。)
鼠标按下事件(Mouse Down Event)
当鼠标按下时，把paint设为true，表示正在画，鼠标没松开。把鼠标点记录下来。
$('#canvas').mousedown(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
paint = true;
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
redraw();
});
|
鼠标移动事件(Mouse Move Event)
当按下鼠标的时候，鼠标移动就把点记录下来并画出来。
$('#canvas').mousemove(function(e){
if(paint){//是不是按下了鼠标
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
redraw();
}
});
|
鼠标松开事件(Mouse Up Event)
$('#canvas').mouseup(function(e){
paint = false;
});
|
鼠标移开事件(Mouse Leave Event)
$('#canvas').mouseleave(function(e){
paint = false;
});
|
addClick方法
记录鼠标坐标点
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
function addClick(x, y, dragging)
{
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
|
redraw方法
目前这个redraw方法是每次都清空画板，然后重新把所有的点都画过，虽然效率不高，但是这样看起来还是挺简单的。
function redraw(){
canvas.width = canvas.width; // Clears the canvas
context.strokeStyle = "#df4b26";
context.lineJoin = "round";
context.lineWidth = 5;
for(var i=0; i < clickX.length; i++)
{
context.beginPath();
if(clickDrag[i] && i){//当是拖动而且i!=0时，从上一个点开始画线。
context.moveTo(clickX[i-1], clickY[i-1]);
}else{
context.moveTo(clickX[i]-1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.stroke();
}
}
|
最终效果
最后
这上面的只是个简单的例子啦。。。原作者还在上面代码的基础上加了颜色，大小，橡皮擦等功能呢~~想看的FQ去看作者博客吧。。这年头不会FQ还真不好意思见人。
时间： 2024-10-30 15:18:38