HTML 5 <canvas>基础图形

第一篇简书献给<canvas>,作为一个自我督促,以下效果也可通过CSS3实现

<canvas></canvas>标签提供一个容器，可以用脚本在其中作图

步骤一：在html中写入<canvas id=“”></canvas>；

步骤二：在javascript中获取对象：

var canvas = document.getElementById("id");

var context = canvas.getContext("2d");

步骤三：创意时刻

注：画板的默认长宽是300px*150px，如需改变需要利用js进行相关的调整

绘制矩形：

context.fillRect(x,y,width,height);  //填充

strokeRect(x,y,width,height);  //描边

context.fillStyle = "red";  //填充颜色

context.strokeStyle = "blue";  //描边颜色

context.fillStyle = "rgba(255,0,0,0.2)";  //设置填充透明度

context.strokeStyle = "rgba(255,0,0,0.2)";  //设置描边透明度

绘制圆弧：

context.beginPath();

context.arc(x, y, radius, starAngle,endAngle, anticlockwise);

context.closePath();

context.fill();

其中radius是半径，starAngle是开始角度，endAngle是结束角度，anticlockwise中true或false随便用，不设置style默认为黑色填充；方便起见，每做一个圆弧设置一个context.beginPath()和context.closePath()

绘制直线

context.moveTo(x,y);  //设置起点

context.lineTo(x,y)  //设置终点

context.stroke();

渐变

1.线性渐变

var lg= context.createLinearGradient(xStart,yStart,xEnd,yEnd);  //渐变开始和结束坐标

lg.addColorStop(offset,color);  //设置（0~1）之间颜色的偏移量

context.fillStyle =lg;

context.fillRect(x, y, width, height);

2.径向渐变

var rg=context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);

rg.addColorStop(offset,color);

context.fillStyle = rg;

context.beginPath();

context.arc(xStart,yStart, radius, 0, Math.PI * 2, true);

context.closePath();

context.fill();

呈现的效果是一个小球