HTML5新特性——画图

HTML5利用<canvas>标签来绘制图像。

首先我们需要用canvas标签来创建一块画布。给画布一些自定义的宽高、边框、背景颜色、等。

<canvas id="cans" width="500" height="500" style="border: 1px solid gold;"></canvas>

var cans=document.getElementById("cans").getContext("2d");

通过getContext("2d")对象属性实现画图。

1.画圆：

　主要运用的代码：cans.arc(150,150,70,70,Math.PI*2,true);第一个参数和第二个参数代表圆心坐标，第三个参数是圆的半径，.第四个参数代表圆周起始位置.0 PI就是起始位置.沿顺时针路线,分别是0.5 PI（正下方）,1 PI和1.5 PI（正上方）,为画饼图提供了扇形范围的依据.第五个参数是弧长Math.PI*2就是整个圆,Math.PI是半圆.第六个参数是一个布尔 值,true是顺时针false是顺时针。

例子：

cans.arc(150,150,70,70,Math.PI*2,true);
cans.strokeStyle="aqua";     //设置圆的边框颜色为蓝色。
cans.fillStyle="aquamarine";  //设置圆的内填充为淡绿色。
cans.lineWidth="5";    　　　//设置边框线宽为5px。　
cans.fill();　　　　　　　　　 //开始填充。　
cans.stroke();　　　　　　　//开始绘制。　

 

2.画正方形：

　主要运用的代码：fillRect(x,y,w,h)填充一个定位于 x 和 y，宽度和高度分别为 w 和 h 的矩形。

var mycontext=cans.createLinearGradient(30,30,300,300);  //createLinearGradient() 方法创建一条线性颜色渐变。
                    mycontext.addColorStop(0,"red");
                    mycontext.addColorStop(0.5,"yellow");
                    mycontext.addColorStop(1,"blue");
                    cans.fillStyle=mycontext;
                    cans.fillRect(0,0,400,400);   //第一个参数，第二个参数离X，Y轴的距离，第三第四个值是矩形的宽高。
                    cans.fill();
                    cans.stroke();

 

3.画三角形：

主要运用的代码：cans.moveTo(x,y);cans.lineTo(x,y); cans.lineTo(x,y); //moveTo创建定点。lineTo() 方法为当前子路径添加一条直线。通过调节x轴y轴的值来实现三角形。

cans.beginPath(); //开始路径
                    cans.strokeStyle="blue"; //边框的颜色
                    cans.lineWidth="1";  //线的宽度为1px
                    cans.moveTo(170,190); 
                    cans.lineTo(170,120);
                    cans.lineTo(100,145);
                    cans.stroke();
                    cans.closePath();　　//结束路径

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　这是我的一些整理，希望各位大神指点！       2016-07-14