标签只是图形容器,您必须使用脚本来绘制图形。
你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。
InternetExplorer9+,Firefox,Opera,Chrome,和Safari支持元素.
注意:InternetExplorer8及更早IE版本的浏览器不支持
一个画布在网页中是一个矩形框,通过
注意:默认情况下
注意:标签通常需要指定一个id属性(脚本中经常引用),width和height属性定义的画布的大小。
提示:你可以在HTML页面中使用多个
使用style属性来添加边框:
canvas元素本身是没有绘图能力的。所有的绘制工作必须在JavaScript内部完成:
实例解析:
首先,找到
然后,创建context对象:
getContext("2d")对象是内建的HTML5对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形:
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中绘制圆形,我们将使用以下方法:
实际上我们在绘制圆形时使用了"ink"的方法,比如stroke()或者fill().
使用arc()方法绘制一个圆:
使用canvas绘制文本,重要的属性和方法如下:
使用fillText():
使用"Arial"字体在画布上绘制一个高30px的文字(实心):
使用strokeText():
使用"Arial"字体在画布上绘制一个高30px的文字(空心):
渐变可以填充在矩形,圆形,线条,文本等等,各种形状可以自己定义不同的颜色。
以下有两种不同的方式来设置Canvas渐变:
当我们使用渐变对象,必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1.
使用渐变,设置fillStyle或strokeStyle的值为渐变,然后绘制形状,如矩形,文本,或一条线。
使用createLinearGradient():
创建一个线性渐变。使用渐变填充矩形:
使用createRadialGradient():
创建一个径向/圆渐变。使用渐变填充矩形:
提示:当使用