在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。
HTML5
你可以通过多种方法使用canvas绘制路径,盒、圆、字符以及添加图像。
表格中的数字表示支持
一个画布在网页中是一个矩形框，通过
注意:默认情况下
注意:标签通常需要指定一个id属性(脚本中经常引用),width和height属性定义的画布的大小.
提示:你可以在HTML页面中使用多个
使用style属性来添加边框:
首先，找到
然后，创建context对象：
getContext("2d")对象是内建的HTML5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形：
设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle默认设置是#000000（黑色）。
fillRect(x,y,width,height)方法定义了矩形当前的填充方式。
canvas是一个二维网格。
canvas的左上角坐标为(0,0)
上面的fillRect方法拥有参数(0,0,150,75)。
意思是：在画布上绘制150x75的矩形，从左上角开始(0,0)。
坐标实例
如下图所示，画布的X和Y坐标用于在画布上对绘画进行定位。鼠标移动的矩形框上，显示定位坐标。
在Canvas上画线，我们将使用以下两种方法：
绘制线条我们必须使用到"ink"的方法，就像stroke().
定义开始坐标(0,0),和结束坐标(200,100)。然后使用stroke()方法来绘制线条:
JavaScript:
在canvas中绘制圆形,我们将使用以下方法:
arc(x,y,r,start,stop)实际上我们在绘制圆形时使用了"ink"的方法,比如stroke()或者fill().
使用arc()方法绘制一个圆:
使用canvas绘制文本，重要的属性和方法如下：
使用fillText():
使用"Arial"字体在画布上绘制一个高30px的文字（实心）：
使用strokeText():
使用"Arial"字体在画布上绘制一个高30px的文字（空心）：
渐变可以填充在矩形,圆形,线条,文本等等,各种形状可以自己定义不同的颜色。
以下有两种不同的方式来设置Canvas渐变：
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。
使用createLinearGradient():
创建一个线性渐变。使用渐变填充矩形:
使用createRadialGradient():
创建一个径向/圆渐变。使用渐变填充矩形：
把一幅图像放置到画布上,使用以下方法:
把一幅图像放置到画布上:
注意：Math.PI表示180°，画圆的方向是顺时针
carl
247***6494@qq.com
(x,y,r)(x1,y1,r1)分别可以代表一个圆形的特征,个人感觉通常情况下(x,y)和(x1,y1)简单地相同即可(即同心圆),这样做出来的径向渐变已经十分美观,符合大众审美观。
yuanchaowhut
yua***aowhut@126.com
jiao
735***921@qq.com
在绘制渐变时，可以通过多个addColorStop()方法来定义渐变；否则渐变将不可见。