标签：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style> #c1{ background:#FFFFFF; } </style> </head> <script> window.onload = function(){ var oc = document.getElementById(‘c1‘); var ogc = oc.getContext("2d");//目前只有2d;3d效果需要参考webgl //ogc.strokeRect(50.5,50.5,100,100);//绘制出一个黑色边框的方块，无填充,当宽度，top值为50时，在浏览器显示2px的边框，设置为50.5border为1px； /* 绘制结果:边框2px红色，淡蓝色填充*/ /* ogc.fillStyle="#33FFDD";//填充方块是淡蓝色的 ogc.strokeStyle="red"; ogc.lineWidth=2;//边线为2px ogc.fillRect(50,50,100,100);//绘制出一个默认为黑色的方块 ogc.strokeRect(50.5,50.5,100,100);*/ /**绘制结果，边框四角变成圆角，弧形**/ /*ogc.fillStyle="#33FFDD"; ogc.strokeStyle="red"; ogc.lineWidth=10; ogc.lineJoin="round"; ogc.fillStyle="#33FFDD"; ogc.fillRect(50,50,100,100); ogc.strokeRect(50.5,50.5,100,100);*/ /**绘画出一个五边形的多边体，填充为红色**/ ogc.save(); ogc.beginPath();//开始绘画 ogc.fillStyle="red"; ogc.moveTo(100,100); ogc.lineTo(200,200); ogc.lineTo(300,200); ogc.lineTo(300,80); ogc.lineTo(240,150); ogc.closePath();//自动闭合两线之间的距离 //ogc.stroke();//闭合绘画 ogc.fill(); ogc.restore(); /**绘画出一个5边多边形，填充颜色为黑色*/ ogc.beginPath();//开始绘画 ogc.moveTo(100,200); ogc.lineTo(200,300); ogc.lineTo(300,300); ogc.lineTo(300,220); ogc.lineTo(240,250); ogc.closePath(); ogc.fill(); /**测试结果，蓝色的正方形框*/ ogc.save(); ogc.beginPath(); ogc.fillStyle="#00FF99"; ogc.rect(50,310,80,80); ogc.closePath(); ogc.stroke(); ogc.fill(); ogc.restore(); //ogc.clearRect(0,0,oc.width,oc.height);//清除画布上的所有绘图 /**鼠标画图**/ oc.onmousedown = function(ev){// 鼠标按下事件 var ev = ev || window.event;//得到window对象 ogc.moveTo(ev.clientX-oc.offsetLeft,ev.clientY-oc.offsetTop);; document.onmousemove = function(ev){ var ev = ev || window.event; ogc.lineTo(ev.clientX-oc.offsetLeft,ev.clientY-oc.offsetTop); ogc.stroke(); }; document.onmouseup = function(ev){ document.onmousemove = null; document.onmouseup = null; } }; ogc.fillRect(0,0,20,20);//绘制一个方块 var num=0; setInterval(function(){ num++; ogc.clearRect(0,0,oc.width,oc.height); ogc.fillRect(num,num,20,20); },30); }; </script> <body style="background:#000000;"> <canvas id="c1" width="400" height="400"> <span>不支持浏览器时显示的文本信息</span> </canvas> <div style="background:#FFFFFF;height:auto;width:auto;"> <h1>canvas标签</h1> <p>绘制环境：getContext("2d");//目前只支持2d的场景</p> <p>绘制方块：fillRect(L,T,W,H);//默认颜色是黑色，L表示left值；T表示top值；W表示宽度；H表示高度。</p> <p>strokeRect(L,T,W,H)；绘制边框的方块</p> <p><h4>设置绘图：</h4></p> <p>fillStyle:填充颜色，（绘制canvas是有顺序的）</p> <p>lineWidth：线边框，是一个数值</p> <p>strokeStyle：边线颜色</p> <p><h4>边界绘制：</h4></p> <p>lineJoin:边界链接点样式；miter:默认、round：圆角、bevel：斜角</p> <p>lineCap:butt:默认、round：圆角、square:高度多出宽度一半的值</p> <p><h4>绘制路径：</h4></p> <p>beginPath:开始绘制路径</p> <p>closePath:结束绘制路径</p> <p>moveTo:移动到绘制的新目标</p> <p>lineTo:新的目标点</p> <p><h4>绘制路径：</h4></p> <p>stroke:画线、默认黑色</p> <p>fill:填充，默认为黑色</p> <p>rect:矩形区域</p> <p>save:保存路径</p> <p>restore:恢复路径</p> <p>clearRect：清除画布上的绘图</p> <p></p> </div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/1246447850qqcom/p/4839364.html
