简单的Html5 canvas 画板涂鸦例子，巧妙的使用onmousemove 事件来实现画画，
可以实现指定颜色和宽度，如图：
<!DOCTYPE HTML><html><head><title>html5 canvas drawing board</title></head><input type="hidden" id="hid_color" value="red"/>COLOR:<input type="button" value="black" style="background:black" name="btn_color"/><input type="button" value="red" style="background:red" name="btn_color"/><input type="button" value="blue" style="background:blue" name="btn_color"/>SIZE:<input type="radio" value="1" name="rad_size" checked="checked"/>1<input type="radio" value="3" name="rad_size"/>3<input type="radio" value="5" name="rad_size"/>5<input type="button" value="Clear" id="btn_clear"><br><canvas id="mycanvas" width="1000" height="500" style="border:1px solid blue;">your browser does not support the canvas tag</canvas></html><script type="text/javascript" src="/jquery-1.8.1.min.js"></script><script>$(function(){draw();$("[name='btn_color']").click(function(){$("#hid_color").val(this.value);draw();});$("[name='rad_size']").click(function(){draw();});$("#btn_clear").click(function(){//用clearRect方法清空画布，document.getElementById('mycanvas').getContext("2d").clearRect(0,0,$("#mycanvas").attr("width"),$("#mycanvas").attr("height"));});});function draw(){var drawflag = false;var canvas = document.getElementById('mycanvas');var cxt = canvas.getContext('2d');//指定颜色cxt.strokeStyle= $("#hid_color").val(); //指定尺寸cxt.lineWidth=$("input[name='rad_size']:checked").val();//开始绘画canvas.onmousedown = function(event) {drawflag = true;cxt.beginPath();cxt.moveTo(event.clientX, event.clientY);}//结束绘画canvas.onmouseup = function(event) {drawflag = false;cxt.closePath();}//鼠标移动,绘画canvas.onmousemove = function(event) {if(drawflag) {cxt.lineTo(event.clientX, event.clientY);cxt.stroke();}}}</script>
如果觉得《Html5 canvas 简单画布画板涂鸦例子》对你有帮助，请点赞、收藏，并留下你的观点哦！
