var bg = ctx.createLinearGradient(x1, y1, x2, y2); //定义线性渐变，渐变的起点 (x1,y1) 与终点 (x2,y2)。 var bg1 = ctx.createRadialGradient(50, 50, 0, 50, 50, 100); //定义径向渐变 bg.addColorStop(0, 'red'); //定义好，之后开始上色 bg.addColorStop(0.5, 'blue'); bg.addColorStop(1, 'rgba(0, 0, 0, 0.6)');
var bg = ctx.createLinearGradient(0, 0, 0, 200); //线性渐变 bg.addColorStop(0, 'black'); bg.addColorStop(0.6, '#fff'); ctx.fillStyle = bg; ctx.fillRect(10, 10, 100, 100);
效果如下图：
var bg1 = ctx.createRadialGradient(100, 100, 0, 100, 100, 50); //径向渐变 bg1.addColorStop(0, '#FF5F98'); bg1.addColorStop(0.75, '#FF0188'); bg1.addColorStop(1, 'rgba(255,1,136,0)'); ctx.fillStyle = bg1; ctx.fillRect(0,0,150,150);
效果如下图：
文字
var ctx = document.getElementById('canvas').getContext('2d'); ctx.shadowOffsetX = 2; //X轴阴影距离，负值表示往上，正值表示往下 ctx.shadowOffsetY = 2; //Y轴阴影距离，负值表示往左，正值表示往右 ctx.shadowBlur = 2; //阴影的模糊程度 ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; //阴影颜色 ctx.font = "30px Times New Roman"; //设置字体和字体大小 ctx.fillStyle = "Black"; ctx.fillText("Sample String", 15, 30); //实体文字 ctx.strokeStyle = 'red'; ctx.strokeText('Hello world', 15, 100); //边框文字
效果如下图：
文字的属性出了上面的列出的以外，还有以下一些属性：
ctx.font = '20px Times New Roman'; ctx.textAlign = 'center'; //start, end, left, right or center ctx.textBaseline = 'middle' //top, hanging, middle, alphabetic, ideographic, bottom ctx.direction = 'inherit' //ltr, rtl, inherit
图像
var img = new Image(); img.src= 'https://www.jb51.net/article/images/background.jpg'; ctx.drawImage(img, 0, 0); //img为图像，(0, 0)为起始坐标
这里的img可以是一个img对象，也可以是一个img元素。
<img src="https://www.jb51.net/article/images/background.jpg"> ctx.drawImage(document.getElementById('img'), 0, 0);
另外，绘制图片的时候还可以对图片进行缩放，类似于css中的background-size：
ctx.drawImage(img, 0, 0, w, h); //w、h指定图片的宽高，则会同比例缩放。
变形
慢慢的从这里开始，就要开始涉及到复杂的绘制了。而开始复杂的绘制之前，我们得先了解一个概念：canvas绘图的状态。
状态
canvas 的状态就是当前画面应用的所有样式和变形的一个快照。另外，用来操作这个状态的有两个方法：save()和restore()。
save()用来保存当前状态，restore()用来恢复刚才保存的状态。他们都可以多次调用。
ctx.fillStyle = 'black'; ctx.fillRect(20, 20, 150, 150); ctx.save(); //保存当前状态 ctx.fillStyle= '#fff'; ctx.fillRect(45, 45, 100, 100); ctx.restore(); //恢复到刚才保存的状态 ctx.fillRect(70, 70, 50, 50);
效果如下图：
位移(translate)
ctx.translate(x, y); //更改canvas的原点
var ctx = document.getElementById('canvas').getContext('2d'); for(var i = 1; i< 4; i++) { ctx.save(); //使用save方法保存状态，让每次位移时都针对（0，0）移动。 ctx.translate(100*i, 0); ctx.fillRect(0, 50, 50, 50); ctx.restore(); }
效果如下图：
旋转
ctx.rotate(Math.PI * 2) //参照原点顺时针旋转360度
ctx.translate(75,75); //把原点移动到(75, 75); for (var i=1; i<6; i++){ // 从里到外一共6圈 ctx.save(); ctx.fillStyle = 'rgb('+(50*i)+','+(255-50*i)+',255)'; for (var j=0; j<i*6; j++){ // 每一圈有i*6个圆点 ctx.rotate(Math.PI*2/(i*6)); ctx.beginPath(); ctx.arc(0,i*12.5,5,0,Math.PI*2,true); ctx.fill(); } ctx.restore(); }
效果如下图：
缩放
ctx.scale(x, y); //基于原点缩放，x、y是两个轴的缩放倍数
var ctx = document.getElementById('canvas').getContext('2d'); ctx.fillStyle = 'red'; ctx.scale(0.8, 1.2); ctx.beginPath(); ctx.arc(75, 75, 60, 0, Math.PI * 2); ctx.fill();
本来绘制的是一个半径为60的圆形，但是经过缩放之后，实际效果如下：
动画
元素的位置移动，就形成了动画。