一.概述

canvas只是图像的容器，绘制图像需要使用javascript来完成

1.基本步骤

0.定义一个画布，设置长宽。

<canvas id="myCanvas" width="200" height="300"><canvas>

1.首先找到canvas元素

var c = document.getElementById("myCanvas");

2.创建context对象

var ctx = c.getContext("2d");

3.绘制一个具体的图形，如下绘制一个颜色为#fff000的长方形

ctx.fillStyle = "#fff000";

ctx.fillRect(0,0,150,75);

2.方法

fill():填充

stroke():描边

---

二.应用场景

1.canvas --路径

moveTo(x,y);定义线条开始的坐标

lineTo(x,y):定义线条结束的坐标

var c =document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.moveTo(100,100);

ctx.lineTo(100,200);

2.canvas -- 圆形

arc( x, y, r, start,stop,[true/false]);

x,y: 坐标原点

r:半径

start,stop:起始角度到结束角度

true/false:顺/逆时针

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.arc(95,50,30,0,2*Math.PI);

ctx.stroke();

3.canvas -- 文本

font : 定义字体（字体，大小）

fillText： 绘制实心的文本

strokeText：绘制空心的文本

4.canvas -- 渐变

线条渐变：createLinearGradient(x,y,x1,y1);

径向渐变：createRadialGradient(x,y,r,x1,y1,r1);

addColorStop():指定颜色停止，可以使用坐标，通常0-1

线条渐变

//创建渐变

var grd= ctx.createLinearGradient(0,0,200,0);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

//填充渐变

ctx.fillStyle = grd;

ctx.fillRect(10,10,150,80);

5.canvas -- 图像

drawImage(image,x,y);