通过canvas，学习怎么在网页进行简易画图
工具/原料
dreamweavercs6(此版本支持htm5)
方法/步骤
1、新建一个HTML文档
2、简历一个canvas，可以理解为画布。<canvasid="can"width="300"height="400"></canvas>。定义canvas属性，<styletype="text/css"> canvas{border:outset2px#ccc}</style>
3、接下来，就是画东西了，利用点能够很好地确定一稍僚敉视个图像， cans.moveTo(100,100); cans.lineTo(50,150); cans.lineTo(100,200);艘早祓胂 cans.lineTo(150,150); cans.closePath(); cans.moveTo(200,200); cans.lineTo(150,250); cans.lineTo(200,300); cans.lineTo(250,250);
4、最后，就完成了。完整代码如下：&l隋茚粟胫t;!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0T鸡堕樱陨ransitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>无标题文档</title><styletype="text/css"> canvas{border:outset2px#ccc}</style></head><bodyonload="unLoad()"><script> functionunLoad(){ varcans=document.getElementById("can").getContext("2d") cans.moveTo(100,100); cans.lineTo(50,150); cans.lineTo(100,200); cans.lineTo(150,150); cans.closePath(); cans.moveTo(200,200); cans.lineTo(150,250); cans.lineTo(200,300); cans.lineTo(250,250); cans.lineWidth=5; cans.strokeStyle='green'; cans.stroke(); }</script></body><canvasid="can"width="300"height="400"></canvas></html>
