Canvas,网页原来是可以画出来的…
认识Canvas
Canvas绘制矩形
Canvas绘制圆形
使用moveTo()和lineTo()绘制路径
Canvas绘制一个饼状图
认识Canvas
HTML5 标签用于绘制图像(通过脚本,通常是 JavaScript)。
不过, 元素本身并没有绘制能力(它仅仅是图形的容器) - 必须使用脚本来完成实际的绘图任务。
getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。
在页面放置一个canvas元素,就相当于放置了一个画布,可以在其中进行图形的绘制。但绘制图形,并不是指使用鼠标作画,而是需要javascript进行配合。创建canvas的时候,他默认的宽高为300px*150px。
Canvas的 getContext(“2d”) 对象的属性和方法,可用于在画布上绘制文本、线条、矩形、圆形等等。
<canvas id="canvas">我是一个画布</canvas>
Canvas绘制矩形
我们在HTML页面中直接插入canvas标签,也可以对它设置宽度和高度,切记设置canvas的时候不可以利用css样式进行设置。那么,我们想在canvas上面画出矩形,我们就需要认识以下几种api。
方法 描述
getContext() 获取绘图环境,可选参数"2d"
fillRect(x,y,width,height) 绘制一个填充的矩形