您的位置：首页 > Web前端 > HTML5

HTML5简易涂鸦板制作

2015-06-06 15:10 1076 查看

运行效果

代码中主要要学会阅读英文单词，务必认真学习English

代码清单1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var startX,startY;
var flag = false;
window.onload = function(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.lineWidth = 10;
ctx.strokeStyle = "rgba(255,0,0,0.5)";

ctx.stroke();
//---- 添加鼠标响应事件----
c.addEventListener("mousedown",function(){
var evt = evt || window.event;
if(!flag){
startX = evt.clientX-10;
startY = evt.clientY-10;
ctx.moveTo(startX,startY);
flag = true;
}
})
c.addEventListener("mousemove",function(){
if(flag){
var evt = evt || window.event;//mouse position
var curX = evt.clientX-10;
var curY = evt.clientY-10;
ctx.lineTo(curX,curY);
ctx.stroke();
}
})
c.addEventListener("mouseup",function(){
flag = false;
})
}
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"  style="position:absolute;left:10px;top:10px;border: 1px solid blue;;"></canvas>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： HTML5

相关文章推荐

新的分享

章节导航