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();
    
};