在画布上(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()方法来定义渐变;否则渐变将不可见。