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  

2016-07-14 21:54   [HTML5]

HTML5新特性总结