H5小游戏 - 涂鸦板
效果截图：
html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>H5 canvas涂鸦板制作</title>
<script>
window.onload=function(){
var startX,startY;
var flag=false;
var c=document.getElementById("mycanvas");
var ctx=c.getContext("2d");//获取画笔
ctx.lineWidth=5;//设置线宽
ctx.strokeStyle="rgba(255,0,0,0.5)";//设置样式
// ctx.moveTo(100,80);//画笔移动到 起点
// ctx.lineTo(300,200);//画笔移动到某点的坐标
// ctx.stroke();//渲染
//添加鼠标响应事件 监听事件
c.addEventListener("mousedown",function(){
//alert("点");
var evt = evt || window.event; //兼容性的 evt 或者在 IE浏览器下是window.event
//alert(evt.clientX+","+evt.clientY);
startX=evt.clientX-10;
startY=evt.clientY-10;
//定义
if(!flag){
startX=evt.clientX-10;
startY=evt.clientY-10;
ctx.moveTo(startX,startY);
flag=true;
}
// if(flag){
// ctx.lineTo(evt.clientX-10,evt.clientY-10);
// ctx.stroke();//渲染
// }else{
// startX=evt.clientX-10;
// startY=evt.clientY-10;
// ctx.moveTo(startX,startY);
// flag=true;
// }
});
c.addEventListener("mousemove",function(){
//此时 flag=true
if(flag){
var evt = evt || window.event;
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="border: 1px solid blue;"></canvas>
</body>
</html>
以上就是关于 “ H5小游戏 - canvas涂鸦板 ” 的全部内容。