1、什么是canvas?
Canvas 是H5的一部分,允许脚本语言动态渲染图像。Canvas 定义一个区域,可以由CSS属性定义该区域的宽高,JavaScript代码可以访问该区域,通过一整套完整的绘图功能(API),在网页上渲染动态效果图。
Canvas本身没有绘图功能,初始化的Canvas没有任何视觉效果,必须通过 JavaScript 拿到Canvas的 id,然后控制Canvas的绘制功能。所以想要使用Canvas,必须对 JavaScript 有一定的了解。本章将为大家介绍简单的画布创建以及几种简单的基础形状绘制。
2、canvas能做什么?
图表制作:图表制作时常被人们忽略,但无论企业内部还是企业间交流合作都离不开图表。现在一些开发者使用HTML/CSS完成图表制作。当然,使用SVG(可缩放矢量图形)来完成图表制作也是非常好的方法。
字体设计:对于字体的自定义渲染将完全可以基于Web,使用HTML5技术进行实现。
图形编辑器:图形编辑器能够100%基于Web实现。
其他可嵌入网站的内容:类似图表、音频、视频,还有许多元素能够更好地与Web融合,并且不需要任何插件。
3、canvas兼容性
表格中的数字表示支持 <canvas>
元素的第一个浏览器版本号
Chrome | IE | Firefox | Safari | Opera | |
---|---|---|---|---|---|
<canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
4、canvas基本用法
4.1、创建画布
通过声明一个 Canvas 标签可以创建一个画布元素,Canvas 支持高度、宽度属性。
实例演示:
<!-- 如果浏览器支持canvas标签,则会显示500*400的黑色边框区域,如果浏览器不支持canvas标签,则会显示标签内部的文字 --> <canvas id="cans" width="500" height="400" style="border:1px solid #000"> 您的浏览器不支持canvas标签 </canvas>
代码说明:如果浏览器支持Canvas标签,则会显示500*400的黑色边框区域,如果浏览器不支持Canvas标签,则会显示标签内部的文字
画布坐标系:
画布左上角(0,0)默认原点,x 坐标向右方增长,y 坐标则向下方延伸
但是,Canvas 的坐标系并不是一成不变的,原点是可改变的,可以对 Canvas 坐标系统进行移动 translate、旋转 rotate 和缩放等变形操作。坐标变换之后绘制的图形 x,y 偏移量都以新原点为准,旋转角度,缩放比,以新坐标系角度为准。
获取画布对象:
声明完画布之后,要操控画布必须获取到它提供的绘图 SDK 对象
var context = a.getContext(contextID)
通过 getContext 函数可以获取画布的 SDK 对象,在 HTML 中它被称为 CanvasRenderingContext2D 对象。CanvasRenderingContext2D 提供了一系列用于绘图的函数,其中包含颜色、样式、阴影线条样式、矩形路径、转换文本、图像绘制函数等。接下来我们就几个常见绘图函数进行说明。
4.2、创建一个矩形
通过 fillRectangle函数可以创建一个矩形,使用 fillStyle 属性为矩形填充颜色。
实例演示:
<canvas id="cans" width="500" height="400" style="border:1px solid #000">您的浏览器不支持canvas</canvas> <script> var a = document.getElementById("cans"); var ctx = a.getContext("2d"); ctx.fillStyle = "#f00"; // fillRect(x,y,width,height) 方法定义了矩形当前的填充方式 ctx.fillRect(0, 0, 250, 175); </script>
代码解释:
fillRect(x,y,width,height) 方法定义了矩形当前的填充方式
ctx就是画布对象
通过fillStyle属性填充矩形区域颜色为#f00
Canvas 是一个二维网格。Canvas 的左上角坐标为 (0,0),fillRect 方法拥有参数 (0,0,250,175),意思是:在画布上,从左上角(0,0)开始绘制 250*175 的矩形。
4.3、绘制线条
使用 moveTo 函数定义线的开始坐标,lineTo 函数定义线的结束坐标,stroke 函数进行最终的绘制操作。
实例演示:
<canvas id="cans" width="500" height="400" style="border:1px solid #000">您的浏览器不支持canvas</canvas> <script> var a = document.getElementById("cans"); var ctx = a.getContext("2d"); //开始坐标在 (10,20) ctx.moveTo(20, 20); //线条移动到 (20,100) ctx.lineTo(20, 100); //线条移动到 (70,100) ctx.lineTo(70, 100); //线条颜色设置为绿色 ctx.strokeStyle = "green"; //描边绘制 ctx.stroke(); </script>
代码解释:
在Canvas上画线,我们将使用以下两种方法:
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
stroke() 绘制线条
4.4、绘制圆形
使用arc函数可以画出一个圆形。
实例演示:
<canvas id="cans" width="500" height="400" style="border:1px solid #000">您的浏览器不支持canvas</canvas> <script> var a = document.getElementById("cans"); var ctx = a.getContext("2d"); //arc(x,y,r,start,stop) ctx.arc(100, 100, 80, 0, 2 * Math.PI); //圆心坐标是(100,100) 半径是80 起始弧度0 结束弧度2PI ctx.stroke(); </script>
代码解释:
我们采用arc(x,y,r,start,stop,counterclockwise)方法创建弧/曲线(用于创建圆或部分圆)。
描述 | |
---|---|
x | 圆的中心的 x 坐标。 |
y | 圆的中心的 y 坐标。 |
r | 圆的半径。 |
start | 起始角,以弧度计。(弧的圆形的三点钟位置是 0 度) |
stop | 结束角,以弧度计。 |
counterclockwise | 可选。规定应该逆时针还是顺时针绘图。false = 顺时针,true = 逆时针。 |
如需通过 arc() 来创建圆,把起始角设置为 0,结束角设置为 2*Math.PI。使用 stroke()或fill() 方法在画布上绘制实际的弧。
4.5、绘制文字
使用 strokeText 绘制文字。
实例演示:
<canvas id="cans" width="500" height="400" style="border:1px solid #000">您的浏览器不支持canvas</canvas> <script> var canvas = document.getElementById('cans'), context = canvas.getContext('2d'); context.font = '40px Arial'; context.fillStyle = 'red'; context.strokeStyle = 'yellow'; context.fillText('ujiuye', canvas.width / 2 - 150, canvas.height / 2 + 15); context.strokeText('ujiuye', canvas.width / 2 - 150, canvas.height / 2 + 15); </script>
代码解释:
font 属性设置或返回画布上文本内容的当前字体属性,font 属性使用的语法与CSS里font属性相同。
10px sans-serif JavaScript 语法: context.font="italic small-caps bold 12px arial"; fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色
JavaScript 语法:
context.fillText(text,x,y,maxWidth);
描述 | |
---|---|
text | 规定在画布上输出的文本。 |
x | 开始绘制文本的 x 坐标位置(相对于画布)。 |
y | 开始绘制文本的 y 坐标位置(相对于画布)。 |
maxWidth | 可选。允许的最大文本宽度,以像素计。 |