H5的canvas属性

h5中的canvas元素可以使用Javascript在网页上绘制图像，canvas具有多种绘制路径，比如：矩形，圆形，字符以及添加图像的方法，但是canvas本身是没有绘图能力的，所有的绘制过程必须在Javascript内完成，JS使用id来寻找对象，然后创建对象，之后在JS中来绘制图形。接下来是几种简单图形的绘制的方法：

1.绘制矩形（代码其他部分已省略）


window.onload指在页面加载完后再加载函数，否则函数不能获取id，则无法往下执行。在fillRect ，clearRect ， strokeRect中四个数值（x，y，width，height）x和y分别表示对于原点的坐标，后面属性是指画出矩形的宽高。下面是画出来的图形：



2.绘制圆形（效果图可以自己写代码来看）



在绘制圆形的过程中用到了arc属性，arc（x，y，radius，start，end，anticlockwise）指的分别是，以（x，y）为圆心，radius为半径，从start开始到end结束，绘制方向按照anticlockwise来进行，一般默认为顺时针绘制

3.绘制爱心：(效果图可以自己写代码来看)



绘制爱心用到了三次贝塞尔曲线，其中bezierCurveTo（x1，y1，x2，y2，x，y）的（x1，y1）和（x2，y2）是两个控制点，（x，y）是结束坐标。moveTo（）是开始点的坐标。fillStyle是填充的颜色，最后的fill()是与fillStyle相对应的，如果将fillStyle改为strockStyle，则最后需要用strock（）结尾，strockStyle属性是边框，若用此属性，则会显示的图像没有填充，strockStyle后面的颜色属性为边框颜色。