canvas指定的 id、width、height三个属性 。
绘制圆形
需要执行如下步骤：
开始创建路径
使用图形上下文对象的beginPath方法。
context.beginPath();
该方法不使用参数，通过该方法开始路径的创建。在几次循环的创建路径的过程中，每次开始创建时都要调用beginPath()方法。
创建图形的路径
创建圆形路径时，需要使用图形上下文对象的arc方法。
context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
该方法使用6个参数，x为绘制圆形的起点横坐标，y为绘制圆形的起点纵坐标，radius为圆形半径，startAngle为开始角度，endAngle为结束角度，anticlockwise为是否按顺时针方向进行绘制。anticlockwise参数为一个布尔值的参数，为true时，按顺时针绘制，为false时，按逆时针绘制。
路径创建完成后，关闭路径
使用图形上下文对象的closePath方法将路径闭合。
context.closePath();
将路径闭合后，路径的创建工作就完成了，但这时只是路径创建完毕，还没有真正绘制图形。
设定绘制样式，调用绘制方法，绘制路径
使用fill()、stroke()、fillStyle()和strokeStyle()指定绘制样式。
var context = canvas.getContext('2d');
context.fillStyle = '#cccccc';
context.fillRect(0, 0, 400, 400);
var n = 0;
for(var i = 0;i<10; i++) {
context.beginPath();
context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
context.closePath();
context.fillStyle = 'rgba(255,0,255, 0.25)';
context.fill();
}
效果如下：
绘制渐变图形
绘制线性渐变
渐变是指在填充时从一种颜色慢慢过渡到另一种颜色。最简单的是两点之间的线性渐变。
绘制线性渐变时，需要使用到LinearGradient对象，可以使用图形上下文对象的createLinearGradient()方法创建该对象。
context.createLinearGradient(xStart, yStart, xEnd, yEnd);
该方法有4个参数，xStart为渐变起始点的横坐标，yStart为渐变起始点的纵坐标，xEnd为渐变结束点的横坐标，yEnd为渐变结束点的纵坐标。
在创建linearGradient对象后，使用addColorStop()方法设定渐变的颜色。
context.addColorStop(offset, color);
offset参数为所设定的颜色离开渐变起始点的偏移量，该参数的值是一个范围在0~1之间的浮点值，渐变起始点的偏移量为0，渐变结束点的偏移量为1。color为绘制时的颜色。
因为是渐变，所以至少需要使用两次addColorStop方法以追加两个颜色（开始颜色和结束颜色），可以追加多个颜色。例如从蓝色渐变到白色然后渐变到绿色。这时蓝色的位移量为0，白色的位移量为0.5，绿色的位移量为1。
接着把fillStyle或strokeStyle设定为linearGradient对象，然后执行填充的方法，就可以绘制渐变图形了。
var context = canvas.getContext('2d');
var g1 = context.createLinearGradient(0, 0, 0, 300);
g1.addColorStop(0, 'rgb(255, 255, 0)');
g1.addColorStop(1, 'rgb(0, 255, 255)');
context.fillStyle = g1;
context.fillRect(0, 0, 400, 320);
var n = 0;
var g2 = context.createLinearGradient(0, 0, 300, 0);
g2.addColorStop(0, 'rgba(0, 0, 255, 0.5)');
g2.addColorStop(1, 'rgba(255, 0, 0, 0.5)');
for(var i = 0; i < 10; i++) {
context.beginPath();
context.fillStyle = g2;
context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
context.closePath();
context.fill();
}
效果如图：
给图形绘制阴影
使用Canvas元素可以给图形添加阴影效果。
图形上下文对象的关于阴影绘制的属性：
-
shadowOffsetX：阴影的横向位移量，默认为0。 -
shadowOffsetY：阴影的纵向位移量，默认为0。 -
shadowColor：阴影的颜色。 -
shadowBlur：阴影的模糊范围，可选。属性值是比0大的数字，否则将被忽略。
function draw() {
var canvas = document.getElementById('canvas');
if (canvas == null) { return false; }
var context = canvas.getContext('2d');
context.fillStyle = "#ffffff";
context.fillRect(0, 0, 400, 300);
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowColor = 'rgba(120,120,120,0.5)';
context.shadowBlur = 7.5;
// 图形绘制
context.translate(0,50);
for(var i = 0;i < 3;i++){
context.translate(50,50);
create5Star(context);
context.fill();
}
}
function create5Star(context) {
var n = 0;
var dx = 100;
var dy = 0;
var s = 50;
//创建路径
context.beginPath();
context.fillStyle = 'rgba(255,215,0,0.5)';
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI / 5 * 4;
for(var i = 0; i < 5; i++) {
var x = Math.sin(i * dig);
var y = Math.cos(i * dig);
context.lineTo( dx + x * s,dy + y * s);
}
context.closePath();
}
draw()
效果如图：
上面的代码使用translate方法绘制了几个呈移动状态的五角星。同时给每个五角星都加上了阴影效果。绘制阴影的时候使用了图形上下文对象的绘制阴影属性，这几个属性与路径无关，只要设定一次之后，全部五角星就都具有阴影效果了。
如果不想让全部五角星都具有阴影效果，需要把shadowColor属性设定为rgba(0, 0, 0, 0)。
仅作学习使用，无商业用途，如有侵权 联系删除
参考文献 https://www.jianshu.com/p/6ea653cb02ac