Javascript HTML5 Canvas实现的一个画板
本文实例为大家分享了HTML5Canvas实现的一个画板代码，供大家参考，具体内容如下
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>DEMO6：自定义画板</title>
</head>
<body>
<canvasid="canvas"width="600"height="300">
浏览器不支持canvas<!--如果不支持会显示这段文字-->
</canvas>
<br/>
<buttonstyle="width:80px;background-color:yellow;"onclick='linecolor="yellow";'>YELLOW</button>
<buttonstyle="width:80px;background-color:red;"onclick='linecolor="red";'>RED</button>
<buttonstyle="width:80px;background-color:blue;"onclick='linecolor="blue";'>BLUE</button>
<buttonstyle="width:80px;background-color:green;"onclick='linecolor="green";'>GREEN</button>
<buttonstyle="width:80px;background-color:white;"onclick='linecolor="white";'>WHITE</button>
<buttonstyle="width:80px;background-color:black;"onclick='linecolor="black";'>BLACK</button>
<br/>
<buttonstyle="width:80px;background-color:white;"onclick="linw=4;">4PX</button>
<buttonstyle="width:80px;background-color:white;"onclick="linw=8;">8PX</button>
<buttonstyle="width:80px;background-color:white;"onclick="linw=16;">16PX</button>
<br/>
<buttonstyle="width:80px;background-color:white;"onclick="copyimage();">EXPORT</button>
<br/>
<imgsrc=""id="image_png"width="600px"height="300px">
<br/>
<scripttype="text/javascript">
varcanvas=document.getElementById('canvas');//获取标签
varctx=canvas.getContext("2d");
varfillStyle="black";
ctx.fillRect(0,0,600,300);
varonoff=false;//按下标记
varoldx=-10;
varoldy=-10;
//设置颜色
varlinecolor="white";
varlinw=4;
canvas.addEventListener("mousemove",draw,true);//鼠标移动事件
canvas.addEventListener("mousedown",down,false);//鼠标按下事件
canvas.addEventListener("mouseup",up,false);//鼠标弹起事件
functiondown(event){
onoff=true;
oldx=event.pageX-10;
oldy=event.pageY-10;
}
functionup(){
onoff=false;
}
functiondraw(event){
if(onoff==true){
varnewx=event.pageX-10;
varnewy=event.pageY-10
ctx.beginPath();
ctx.moveTo(oldx,oldy);
ctx.lineTo(newx,newy);
ctx.strokeStyle=linecolor;
ctx.lineWidth=linw;
ctx.lineCap="round";
ctx.stroke();
oldx=newx;
oldy=newy;
}
}
functioncopyimage(event)
{
varimg_png_src=canvas.toDataURL("image/png");//将画板保存为图片格式的函数
document.getElementById("image_png").src=img_png_src;
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助。