Canvas API 提供了一个通过JavaScript 和 HTML的<canvas>
元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。
Canvas API主要聚焦于2D图形。而同样使用<canvas>
元素的 WebGL API 则用于绘制硬件加速的2D和3D图形。
Document.getElementById()
方法获取HTML <canvas>
元素的引用。接着,HTMLCanvasElement.getContext()
方法获取这个元素的context——图像稍后将在此被渲染。
由 CanvasRenderingContext2D
接口完成实际的绘制。
<canvas>
标签只有两个属性—— width
和height
。
当没有设置宽度和高度的时候,canvas会初始化宽度为300像素和高度为150像素
<canvas>元素可以像任何一个普通的图像一样(有margin
,border
,background
等等属性)被设计。
当开始时没有为canvas规定样式规则,其将会完全透明。
canvas起初是空白的。为了展示,首先脚本需要找到渲染上下文,然后在它的上面绘制。<canvas>
元素有一个叫做 getContext()
的方法,这个方法是用来获得渲染上下文和它的绘画功能。getContext()
只有一个参数,上下文的格式。对于2D图像而言,你可以使用 CanvasRenderingContext2D
<canvas>
只支持两种形式的图形绘制:矩形和路径(由一系列点连成的线段)
有其他类型的图形都是通过一条或者多条路径组合而成的
canvas提供了三种方法绘制矩形:
fillRect(x,y.width,height)
绘制一个填充的矩形
strokeRect(x,y,width,height)
绘制一个矩形的边框
clearRect(x,y,width,heigth)
清除指定矩形区域,让清除部分完全透明
上面提供的方法之中每一个都包含了相同的参数。x与y指定了在canvas画布上所绘制的矩形的左上角(相对于原点)的坐标。width和height设置矩形的尺寸。
矩形例子:
function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.fillRect(25, 25, 100, 100); ctx.clearRect(45, 45, 60, 60); ctx.strokeRect(50, 50, 50, 50); } }
fillRect()函数绘制了一个边长为100px的黑色正方形。clearRect()函数从正方形的中心开始擦除了一个6060px的正方形,接着strokeRect()在清除区域内生成一个5050的正方形边框。