canvas:
canvas是HTML5中的元素,其使用JavaScript在网页上绘制图像。它拥有多种绘制路径,矩形,圆形,字符以及添加图像的方法。
创建画布的方法:
创建canvas画布首先要在HTML5页面中添加canvas元素:
<canvas id="canvas" width = "500" height= "500">
您的浏览器不支持canvas //当某些浏览器不支持canvas时显示改文字
</canvas>
这样就创建了一个宽为500像素,高为500像素的画布。但是canvas元素本身是没有绘图的能力的,因此就需要借助javascript来完成绘图。
var canvas = document.getElementById("canvas");//找到画布对象
var ctx = canvas.getContext("2d");//创建绘画所需要的笔
这样,我们在canvas上绘制图案时的准备工作就完成了。
接下来我们通过画笔所拥有的不同的方法来绘制不同的图案。
线段的绘制
一条线段是有起点和终点的。在canvas里面绘制线段也是同样需要给定起点和终点。
ctx.moveTo(10,10);//moveTo:线段起点,里面的参数分别为起点坐标的横坐标和纵坐标。
ctx.lineTo(100,10);//lineTo:线段终点,里面的参数分别为起点坐标的横坐标和纵坐标。
ctx.lineTo(100,20);//当我们再次使用该方法时,线段起点默认在之前线段的终点。新的坐标位置为新的终点。
ctx.stroke();//退出路径绘制,如果没有该方法,线段将会闭合
圆的的绘制
在canvas中我们也可以绘制圆形:
ctx.beginPath();//开始一条路径
ctx.arc(100,100,20,0,2*Math.PI);/前两个参数为坐标,第三个参数为半径,后两个参数分别是开始角和结束角,每0.5Math*PI为90度
ctx.stroke();//结束路径
文本的绘制
通过canvas我们也可以自定义各种样式的文字
ctx.font="30px";//字体样式
ctx.fillText("Hello World",10,50);//参数(内容, 开始绘制的横坐标,开始绘制的纵坐标)