【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()