携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第19天，点击查看活动详情
在前面的文章canvas的基本使用（一）中，介绍了canvas的使用场景，概念和基本用法，本文将继续学习canvas的其他用法。
canvas描述
<canvas> 标签用于绘制图像，但是其元素本身并没有绘制能力，需要借助脚本（js）。getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性
canvs - 矩形
| 方法 | 描述 |
|---|---|
| rect() | 创建矩形。 |
| fillRect() | 绘制"被填充"的矩形。 |
| strokeRect() | 绘制矩形（无填充）。 |
| clearRect() | 在给定的矩形内清除指定的像素。 |
Canvas - 圆形
画圆线使用arc(中心点X坐标,中心点Y坐标,半径,起始角度,结束角度)，使用 arc() 来创建圆，起始角设置为 0，结束角设置为 2*Math.PI。
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
效果如下
Canvas - 文本
- font - 定义字体
- fillText(text,x,y) - 在 canvas 上绘制实心的文本
- strokeText(text,x,y) - 在 canvas 上绘制空心的文本
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.font="20px Arial";
ctx.fillText("Hello World",10,50);
Canvas - 渐变
渐变可以用于填充矩形, 圆形, 线条, 文本等。
渐变分为线性渐变和径向渐变。跟背景色一样，知识是互通的。
- createLinearGradient(x,y,x1,y1) - 创建线条渐变
- createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向渐变
渐变必使用至少两种颜色
addColorStop()方法用来指定结束颜色，参数用坐标来描述，可以是0至1。
线性渐变
var c = document.getElementById("canvas");
var ctx = c.getContext("2d"); // 创建渐变
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"blue");
grd.addColorStop(1,"white"); // 填充渐变
ctx.fillStyle=grd; ctx.fillRect(10,10,150,80);
效果如图
径向渐变
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"blue");
grd.addColorStop(1,"white");
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
效果如下
Canvas - 图像
- drawImage(image,x,y)
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("img");
ctx.drawImage(img,10,10);
