canvas开发专题-第一天

canvas前台样式

<canvas id="can" width="1000px" height="800px" style="background:aquamarine;"></canvas>

设置canvas的样式与id值，便于后台获取
js部分

window.onload=function(){
    var can=document.getElementById("can");
    var con=can.getContext('2d');    //获取当前上下文，选择2d
}

如果是要做3d开发，可以选择框架或者使用webGL
注意:原生js最好放在windows.onload=function(){....}里面，是为了防止调用函数的时候js未加载完成，造成函数获取不到
当我们获取到当前canvas后，我们就可以开始尝试画一点东西

window.onload=function(){
    var can=document.getElementById("can");
    var con=can.getContext('2d');
    con.strokeStyle='red';         //设置路径风格(为红色)
    con.strokeRect(0,0,100,100);   //画矩形 (起始点的X,起始点的y，矩形的宽，举行的高)
    con.fillStyle='red';           //设置填充的风格(红色)
    con.fillRect(0,0,50,50);       //画矩形(同画矩形)

}

绘制圆弧
圆弧context.arc(x, y, radius, starAngle,endAngle, anticlockwise)

x:圆心的x坐标

y:圆心的y坐标

straAngle:开始角度

endAngle:结束角度

anticlockwise:是否逆时针（true）为逆时针，(false)为顺时针

window.onload=function(){
    var can=document.getElementById("can");
    var con=can.getContext("2d");
    con.fillStyle="#FF0000";                     //设置填充风格
    con.beginPath();                             //路径开始
    con.arc(70,18,15,0,Math.PI*2,true);          //开始画圆
    con.closePath();                             //结束路径
    con.fill();                                  //开始填充颜色
}

绘制文字

window.onload=function(){
    var can=document.getElementById("can");
    var con=can.getContext("2d");
    con.fillStyle='red';                    
    con.fillText('hello',10,10,50);         //文本填充(文字,起点的x，起点的y,最高宽)
}

绘制线段 context.moveTo(x,y) context.lineTo(x,y)

window.onload=function(){
    var can=document.getElementById("can");
    var con=can.getContext("2d");
      con.beginPath();          
      con.fillStyle ='red'
      con.lineTo(100, 100);//第一次lineTo的时候和moveTo功能一样
      con.lineTo(200, 200);        //之后的lineTo会以上次lineTo的节点为开始
      con.stroke();            //绘制路径，这里不可以使用填充fill()，因为是路径撒
}

第一天的canvas就讲解那么多，学了这些后，可以尝试在canvas使用普通形状拼接出一些有趣的形状呢