HTML|H5 canvas 基础一

HTML5 canvas画布 canvas是什么 H5里面的一个标签,作为一个标签,他就像是一幅画布,等待着你来作画。可以说,他只是一个容器而已,需要配合着JavaScript来进行绘制。
创建canvas元素 创建了一个canvas元素,并规定了元素的id,宽度和高度。


注意: 创建标签,画布的大小在标签上设置,如果在css设置,设置的是这个标签的大小,而不是画布的大小。
通过 JavaScript 来绘制 canvas元素本身没有绘图能力,所有的绘制工作必须在javascript内部完成:
画个矩形:

理解坐标 上面的fillRect方法拥有参数(10,10,100,100);
意思是:在画布上从左上角开始 (10,10),绘制一个 100x100 的矩形。
getContext()
getContext() 方法返回一个用于在画布上绘图的环境。
参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 “2d”,它指定了二维绘图,并且导致这个方法返回一个环境对象,该对象导出一个二维绘图 API。
画个三角形

得到一下图形
HTML|H5 canvas 基础一
文章图片

然后闭合图形

画个圆形

HTML|H5 canvas 基础一
文章图片

arc() 方法创建弧/曲线(用于创建圆或部分圆)
提示:如需通过 arc() 来创建圆,请把起始角设置为 0,结束角设置为 2*Math.PI。
JavaScript 语法:
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
x 圆的中心的 x 坐标。
y 圆的中心的 y 坐标。
r 圆的半径。
sAngle 起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)。
eAngle 结束角,以弧度计。
counterclockwise 规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针。
渐变

HTML|H5 canvas 基础一
文章图片

context.createLinearGradient(x0,y0,x1,y1);
x0 渐变开始点的 x 坐标
y0 渐变开始点的 y 坐标
x1 渐变结束点的 x 坐标
y1 渐变结束点的 y 坐标
插入图片

【HTML|H5 canvas 基础一】HTML|H5 canvas 基础一
文章图片

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
img 规定要使用的图像、画布或视频。
sx 可选。开始剪切的 x 坐标位置。
sy 可选。开始剪切的 y 坐标位置。
swidth 可选。被剪切图像的宽度。
sheight 可选。被剪切图像的高度。
x 在画布上放置图像的 x 坐标位置。
y 在画布上放置图像的 y 坐标位置。
width 可选。要使用的图像的宽度。(伸展或缩小图像)
height 可选。要使用的图像的高度。(伸展或缩小图像)
基础的就到这里了,以后再慢慢写。

    推荐阅读