标签：new 环境 asc 对象 移动 用法 offset == 设置
要使用canvas元素，必须设置其width和height属性！并且需要添加一些样式才能在页面上看见。
2d上下文：要在canvas上画图，需要取得绘图上下文(2d)。
通过canvas元素调用getContext（）方法并传入上下文的名字“2d”，就可以获取到2d上下文对象。
通过2d上下文对象调用相关的API就可以在canvas上肆意绘画。
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> 画笔大小： <button>粗</button> <button>中</button> <button>细</button> <button>橡皮</button> <button>清屏</button> <input type="color" id="col" value="#e44444" /><br /> <canvas id="myCanvas" width="900" height="550" style="border: 1px solid red; "></canvas> <script type="text/javascript"> drow(); function drow(){ var can = document.getElementById("myCanvas");//声明一个变量 if(can.getContext){ var cd = can.getContext("2d");//声明2d环境 var but = document.getElementsByTagName("button"); var a = 1; var b = 1; but[0].onclick = function(){ a=10;//这里是第一个画笔 } but[1].onclick = function(){ a=5; } but[2].onclick = function(){ a=1; } but[3].onclick = function(){ b+=1 } but[4].onclick = function(){ cd.clearRect(0,0,900,550); } can.onmousedown = function(ev){ var x = ev.clientX-can.offsetLeft; var y = ev.clientY-can.offsetTop; cd.beginPath(); cd.moveTo(x,y); cd.lineWidth = a; can.onmousemove = function(ev){ if (b%2 == 1) { var nex = ev.clientX-can.offsetLeft;//移动后的新点 var ney = ev.clientY-can.offsetTop; cd.lineTo(nex,ney); cd.strokeStyle = col.value; cd.stroke(); but[3].innerHTML = "橡皮" } else{ but[3].innerHTML = "铅笔" var nex = ev.clientX-can.offsetLeft;//移动后的新点 var ney = ev.clientY-can.offsetTop; cd.clearRect(nex,ney,10,10); } } can.onmouseup = function(){ can.onmousemove = null; } } } } </script> </body> </html>
标签：new 环境 asc 对象 移动 用法 offset == 设置
原文地址：http://www.cnblogs.com/maoking/p/7392665.html
