Canvas API(画布)用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用 JavaScript 操作的位图(bitmap)。
1.Canvas 基本框架
*html
<canvas id="canvas"style="width: ;height= ;"> 您的浏览器不支持 canvas!</canvas>// 标签里面可以设置 style,符合 W3C 标准.
*Javascript
每个 canvas 节点都有一个对应的 context 对象(上下文对象),Canvas API 定义在这个 context 对象上面,所以需要获取这个对象,方法是使用 getContext 方法。
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');// 使用 context 进行绘制
注: 如果 getContext 的参数是 "webgl", 就表示用于生成 3D 图像(即立体图案).
2. 基本绘图状态
* 直线
context.moveTo(x,y);// 起始位置
context.lineTo(x,y);// 终点坐标
* 弧线
context.arc(cx,cy,r,sAng,eAng,anticlock);//cx,cy 是圆心坐标;r 是半径;sAng,eAng 是圆弧的角度;anticlock - 布尔值 (表示顺时针还是逆时针作图)
* 封闭图形 - 隔开每次画图
context.beginPath();// 开始新的状态路径绘制
context.closePath();// 关闭此次绘制
3. 绘图样式
context.lineWidth - 线条宽度
context.strokeStyle - 绘图线条的样式
context.fillStyle - 填充的样式
4. 绘图
context.stroke();- 绘图命令
context.fill();- 填充命令
5. 指定区域刷新
contetx.clearRect(x,y,width,height);
6. 找到 canvas 画布
context.canvas
7.canvas 画布本身的属性
canvas.width
canvas.height
canvas.getContext('2d')// 绘图环境
8. 绘制动画效果
- setInterval(function() {
- render(); //渲染 update();//数据更新},50);//定时器
9. 绘制文本 - fillText(string, x, y) 用来绘制文本,它的三个参数分别为文本内容、起点的 x 坐标、y 坐标。使用之前,需用 font 设置字体、大小、样式 (写法类似与 CSS 的 font 属性)。与此类似的还有 strokeText 方法, 用来添加空心字。
- // 设置字体ctx.font = "Bold 20px Arial"; // 设置对齐方式ctx.textAlign = "left";// 设置填充颜色ctx.fillStyle = "#008600"; // 设置字体内容,以及在画布上的位置ctx.fillText("Hello!", 10, 50); // 绘制空心字ctx.strokeText("Hello!", 10, 100);
10.Canvas - 渐变
渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
以下有两种不同的方式来设置 Canvas 渐变:
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向 / 圆渐变
当我们使用渐变对象,必须使用两种或两种以上的停止颜色。
addColorStop() 方法指定颜色停止,参数使用坐标来描述,可以是 0 至 1.
使用渐变,设置 fillStyle 或 strokeStyle 的值为 渐变,然后绘制形状,如矩形,文本,或一条线。
使用 createLinearGradient():
11.Canvas - 图像
把一幅图像放置到画布上, 使用以下方法:
drawImage(image,x,y); // x,y 表示图像左上角在画布中的位置
例:
- var c = document.getElementById("myCanvas");
- var ctx = c.getContext("2d");
- var img = document.getElementById("scream");
- ctx.drawImage(img, 10, 10);
就爱阅读 www.92to.com 网友整理上传, 为您提供最全的知识大全, 期待您的分享,转载请注明出处。
来源: