WEB前端开发学习----10. canvas实现画板的两个方法

时间：2014-12-23 00:11:28 阅读：207 评论：0 收藏：0 [点我收藏+]

标签：

方法1：查看演示点击鼠标作画

此方法就是鼠标移动的时候不停的画小圆点，然后用等粗的线将小圆点串起来（有点类似于珍珠项链）。因为是小圆点，所以效果要比方法2好，比较平滑。

方法2：查看演示点击鼠标作画

这个方法很容易理解，就是不断的将鼠标所在的位置用线段连起来。缺点是不够平滑，尤其是粗线条的时候。

方法1：

[html] view plain copy

方法2：

[html] view plain copy

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas width="900" height="500" id="canvas" style="border:1px solid black">请更新浏览器版本</canvas>
<script >
var canvas=document.getElementById("canvas");
var cxt=canvas.getContext("2d");
var flag=false
cxt.lineWidth=20;
canvas.onmousedown=function(evt){
//alert(evt.pageX);
//alert(this.offsetLeft);
var startX=evt.clientX-this.offsetLeft;
var startY=evt.clientY-this.offsetTop;
cxt.beginPath();
cxt.moveTo(startX, startY);
flag=true;
}
canvas.onmousemove=function(evt){
if(flag){
var endX=evt.clientX-this.offsetLeft;
var endY=evt.clientY-this.offsetTop;
cxt.lineTo(endX, endY);
cxt.stroke();
}
}
canvas.onmouseup=function(){
flag=false;
}
canvas.onmouseout=function(){
flag=false;
}
</script>
</body>
</html>

标签：

原文地址：http://www.cnblogs.com/cdh-fw/p/4179206.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行