canvas 在线画图
canvas 在线画图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*画图大师来了*/
#cans{border:1px solid red;}
</style>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
$().ready(function () {
var d=$("#cans").get(0).getContext("2d");
d.lineWidth=5;// 画笔粗细
d.strokeStyle="blue"; // 画笔颜色
var control=false; // 控制画
$("#cans").bind("mousedown", function (e) {
//
alert(e.pageX); //鼠标坐标
//
alert(this.offsetLeft); //指 $("#cans") 边框与浏览器窗口左边的距离
var mouseX= e.pageX-this.offsetLeft;
var mouseY= e.pageY-this.offsetTop;
control=true; // 鼠标按下时可以画
d.moveTo(mouseX,mouseY); // 开始画 起止位置
});
$("#cans").bind("mouseup", function (e) {
control=false;
});
$("#cans").bind("mousemove", function (e) {
if(control){
var mouseX= e.pageX-this.offsetLeft;
var mouseY= e.pageY-this.offsetTop;
d.lineTo(mouseX,mouseY); // 终止位置
d.stroke(); // 结束图形
}
});
});
</script>
</head>
<body>
<canvas>浏览器不支持canvas</canvas>
</body>
</html>
相关文章
精彩导读
热门资讯
关注我们
