canvas
初始canvas
<canvas id="c1" width="400" height="400">
<span>不支持canvas浏览器</span>
</canvas>
window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); //webgl : 3D绘图 };
绘制实心和空心正方形
window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); //oGC.fillRect(50,50,100,100); left top 宽 高
//如果是整数的话会出现2px边框,可以改成下面的0.5
oGC.strokeRect(50.5,50.5,100,100); };
绘制实心和空心正方形加边线和清除画布
window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); oGC.fillStyle = 'red';//填充样式 oGC.strokeStyle = 'blue';//边框颜色 oGC.lineWidth = 10;//边框大小
//下面两个是有顺序的谁先写谁就先出来
oGC.fillRect(50,50,100,100); oGC.strokeRect(50.5,50.5,100,100); };
绘制实心和空心正方形加圆角斜角
window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); oGC.fillStyle = 'red'; oGC.strokeStyle = 'blue'; oGC.lineWidth = 10; oGC.lineJoin = 'bevel';//round是圆角 bevel是斜角 oGC.fillRect(50,50,100,100); oGC.strokeRect(50.5,50.5,100,100); };
绘制实心和空心的线路,要用到绘图路径
window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); oGC.beginPath(); oGC.moveTo(100,100);//在left top距离100处点了一点(起始) oGC.lineTo(200,200);//在left top距离200处点了一点(过程) oGC.lineTo(300,200); oGC.closePath();//1、闭合,2、关闭绘制 oGC.stroke();//画线 oGC.beginPath(); oGC.moveTo(100,200); oGC.lineTo(200,300); oGC.lineTo(300,300); oGC.closePath(); oGC.fill(); };
绘制完然后清除画版
window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); oGC.beginPath(); oGC.rect(100,100,100,100);//绘制方块 oGC.closePath(); oGC.fill(); oGC.clearRect(0,0,oC.width,oC.height); //清除矩形画布 };
画布互不影响
window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); oGC.save();//开始保存路径 oGC.fillStyle = 'red'; oGC.beginPath(); oGC.moveTo(100,100); oGC.lineTo(200,200); oGC.lineTo(300,200); oGC.closePath(); oGC.fill(); oGC.restore();//结束恢复路径 oGC.beginPath(); oGC.moveTo(100,200); oGC.lineTo(200,300); oGC.lineTo(300,300); oGC.closePath(); oGC.fill(); };
oGC.lineCap = 'square'; // round 端点样式
通过js画线
window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); oC.onmousedown = function(ev){ var ev = ev || window.event; 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(){ document.onmousemove = null; document.onmouseup = null; }; }; };
如果在样式里设置canvas宽度如width:300 height:200 其实是设置canvas的高度等比例缩放
画圆
window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); oGC.moveTo(200,200); //弧度 = 角度*Math.PI/180 oGC.arc(200,200,150,0,90*Math.PI/180,true);//true是顺时针,false是逆时针 150是半径,0是起始 oGC.stroke(); };