【HTML5 canvas】关于canvas标签的理解和简单应用

canvas标签只是图形容器，我们必须使用脚本来绘制图形

---

自己边练习简单案例边学习：

HTML部分:

<canvas id="myCanvas" width="1000" height="500"></canvas>

属性：width、height规定画布的宽高

绘制图形部分则需要JavaScript操作

javascript部分

1、绘制矩形

<script type="text/javascript">
    var canvas=document.getElementById('myCanvas');
    var ctx=canvas.getContext('2d'); //Canvas.getContext(contextID)方法返回一个用于在画布上绘图的环境;
      // contextID指定了想要在画布上绘制的类型。目前唯一的合法值是"2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图API

    //画矩形，画了四个
    ctx.fillStyle="#ff0000";  //fillstyle表示填充颜色
    ctx.fillRect(0,0,75,75);  //fillRect表示填充矩形；前两个参数表示起点左边；后两个表示矩形宽高
    ctx.fillStyle="#00ff00";
    ctx.fillRect(0,75,75,75);
    ctx.fillStyle="#0000ff";
    ctx.fillRect(75,0,75,75);
    ctx.fillStyle="#ffff90";
    ctx.fillRect(75,75,75,75);

    //设置透明度，取值范围0-1
    ctx.globalAlpha=0.2;  //全局属性；可以控制被画到画布上的片段的默认属性
  </script>

---

2、绘制圆

<script type="text/javascript">
    var canvas=document.getElementById('myCanvas');
    var ctx=canvas.getContext('2d'); 
    //画5个同心圆

    for(var i=0;i<5;i++){
        ctx.beginPath();  //path路径；beginPath()方法开始一条路径，或者重置当前路径，绘制路径
        ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
        ctx.fillStyle="#0000ff";
        ctx.fill();
    }
    /** arc()方法创建弧/曲线（用于创建圆或部分圆）
     语法：context.arc(x,y,r,sAngle,eAngle,counterclockwise);
     x,y—— 圆的中心的x坐标和y坐标；r——圆的半径；sAngle——起始角，以弧度计（弧的圆形的三点钟位置是0度）；
     eAngle——结束角，以弧度计；counterclockwise——可选。规定应该逆时针还是顺时针绘图。false=顺时针，true=逆时针。
     提示：如果需要创建圆，请把起始角设置为0，结束角设置为2*Math.PI=360°；
     */


</script>

---

3、绘制直线

<script type="text/javascript">
    var canvas=document.getElementById('myCanvas');
    var ctx=canvas.getContext('2d'); 
    //关于路径的小案例
    ctx.beginPath();
    ctx.lineWidth="8";  //路径宽度;
    ctx.strokeStyle="blue";  //路径颜色；stroke画，划，敲打键盘；
    ctx.moveTo(150,75);    //路径起始坐标；前者是横坐标150；即距ctx的左上角(0,0)向右150距离；后者是向下150
    ctx.strokestyle="#123311"; //轮廓颜色
    ctx.stroke();     //进行绘制；两点相连为直线

 </script>

---

4、定义文本位置

<script type="text/javascript">
    var canvas=document.getElementById('myCanvas');
    var ctx=canvas.getContext('2d'); 
    //定义文本位置
    //textAlign属性，定义文本位置；值有left、right、center，这个位置是某点相对于文字的开始处而言。
    var x=150;
    var y=150;
    ctx.font="30pt Calibri";
    ctx.textAlign="left";    //点(150,150)相对于文字的开始处在左边；即文字在该点的右边
    ctx.fillStyle="#883735";
    ctx.fillText("Hello World!",x,y);

 </script>

---

5、绘制阴影

<script type="text/javascript">
    var canvas=document.getElementById('myCanvas');
    var ctx=canvas.getContext('2d'); 
    //绘制阴影
    ctx.shadowOffsetX=5;    //设置或返回形状与阴影的水平距离，x轴偏移量
    ctx.shadowOffsetY=5;    //垂直距离；Y轴偏移量
    ctx.shadowBlur=4;  //设置或返回阴影的模糊级数
    ctx.shadowColor="rgba(255,0,0,0.5)";   //设置或返回阴影的颜色
    ctx.fillStyle="#90afff";    //矩形要填充的颜色;顺序很重要，应该先规定好填充颜色，再画矩形
    ctx.fillRect(300,0,150,150); //画一个矩形
 </script>

---

6、设置边角的类型

<script type="text/javascript">
    var canvas=document.getElementById('myCanvas');
    var ctx=canvas.getContext('2d'); 

    //lineJoin属性设置或返回所创建边角的类型
    //属性值：bevel ——创建斜角；round—— 创建圆角；miter——默认，创建尖角
    ctx.beginPath();
    ctx.moveTo(450,30);
    ctx.lineTo(500,150);
    ctx.lineTo(600,50);
    ctx.lineTo(650,200);
    //  ctx.lineJoin="round"; //创建圆角；在折线的折角处
    ctx.lineJoin="bevel";  //创建斜角
    ctx.lineCap="round"; //lineCap属性定义了线条头部的形状；
    // 属性值：butt——默认，平直的边缘；round——圆形线帽；square——正方形线帽
    ctx.lineWidth=16;
    ctx.stroke();
 </script>

最后就是一些自己的一些总结和即将用到的属性：

textBaseline属性设置文字竖直对齐方式，设置或返回在绘制文本时的当前文本基线。可取属性值：top，hanging，middle，alphabetic，ideographic，bottom

rect() 方法为当前路径添加一个矩形子路径

rotate() 旋转画布的坐标系统；调用方式：rotate(angle);

angle 为旋转的弧度，正值表示顺时针方向旋转，负值表示逆时针方向旋转；

clip() 方法将当前的路径作为后面绘制操作的区域； 比如用arc画了圆之后，后面立即跟个clip函数，表示后面再有的操作都是在这个圆内；

createRadialGradient() 方法创建一条放射颜色渐变效果；参数(按顺序说明)：x,y——开始圆的圆心坐标，radiusStart——开始圆的直径；xEnd,yEnd——结束圆的圆心坐标；radiusEnd——结束圆的直径

 eg: 
 var rag=ctx.createRadialGradient(95,15,15,102,20,40);
 rag.addColorStop(0,'#ff6721');
 rag.addColorStop(0.8,'#091021');
 rag.addColorStop(1,'rgba(0,123,232,0.2)');
 //addColorStop()方法规定gradient对象中的颜色与位置；前面的参数表示渐变中开始与结束之间的位置，参数值介于0-1之间。后者则是在该位置显示的css颜色值

ctx.clearRect(0,0,300,300); //删除一个画布的矩形区域，清除某区域矩形画布，并以败诉作为填充背景

总结：绘制整个形状用fill()填充；绘制轮廓用stroke()