网页制作

调用HTML5的Canvas API绘制图形的快速入门指南
网页制作 2024/12/23 佚名
3 2

1. Canvas元素
以下html代码定义了一个canvas元素。

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Canvas快速入门</title>  
  5.     <meta charset="utf-8"/>  
  6. </head>  
  7. <body>  
  8. <div>  
  9.     <canvas id="mainCanvas" width="640" height="480"></canvas>  
  10. </div>  
  11. </body>  
  12. </html>  

通过以下Javascript语句访问canvas元素：

JavaScript Code复制内容到剪贴板
  1. //DOM写法   
  2. window.onload = function () {   
  3.     var canvas = document.getElementById("mainCanvas");   
  4.     var context = canvas.getContext("2d");   
  5. };   
  6. //jQuery写法   
  7. $(document).ready(function () {   
  8.     var canvas = $("#mainCanvas");   
  9.     var context = canvas.get(0).getContext("2d");   
  10. });   
  11. //接下来就可以调用context的方法来调用绘图API  

2. 基础API
2.1 坐标系统
Canvas 2D渲染上下文采用平面笛卡尔坐标系统，左上角为原点(0,0)，坐标系统的1个单位相当于屏幕的1个像素。具体如下图：
调用HTML5的Canvas API绘制图形的快速入门指南

2.2 绘制基本图形
2.2.1 矩形

JavaScript Code复制内容到剪贴板
  1. //绘制一个填充矩形   
  2. context.fillRect(x, y, width, height)   
  3. //绘制一个边框矩形   
  4. context.strokeRect(x, y, width, height)   
  5. //清除一个矩形区域   
  6. context.clearRect(x, y, width, height)  

2.2.2 线条
绘制线条与绘制图形有一些区别，线条实际上称为路径。要绘制一条简单的路径，首先必须调用beginPath方法，接着调用moveTo设置路径的起点坐标，然后调用lineTo设置线段终点坐标（可多次设置），再调用closePath完成路径绘制。最后调用stroke绘制轮廓（或调用fill填充路径）。以下为例子：

JavaScript Code复制内容到剪贴板
  1. //示例   
  2. context.beginPath();    //开始路径   
  3. context.moveTo(40, 40);    //移动到点(40,40)   
  4. context.lineTo(300, 40);    //画线到点(300,30)   
  5. context.lineTo(40, 300);    //画线到点(40,300)   
  6. context.closePath();    //结束路径   
  7. context.stroke();    //绘制轮廓   
  8. //或者填充用context.fill();  

2.2.3 圆形
Canvas实际上并没有专门绘制圆形的方法，可以通过画圆弧来模拟圆形。由于圆弧是一种路径，所以画圆弧的API应该包含在beginPath和closePath之间。
2.3 样式
2.3.1 修改线条颜色

JavaScript Code复制内容到剪贴板
  1. var color;   
  2. //指定RGB值   
  3. color = "rgb(255, 0, 0)";   
  4. //指定RGBA值（最后一个参数为alpha值，取值0.0~1.0）   
  5. color = "rgba(255, 0, 0, 1)";   
  6. //指定16进制码   
  7. color = "#FF0000";   
  8. //用单词指定   
  9. color = "red";   
  10. //设置填充颜色   
  11. context.fillStyle = color;   
  12. //设置边框颜色   
  13. context.strokeStyle = color;  

2.3.2 修改线宽

JavaScript Code复制内容到剪贴板
  1. //指定线宽值   
  2. var value= 3;   
  3. //设置边框颜色   
  4. context.linewidth = value;  

2.4 绘制文本

JavaScript Code复制内容到剪贴板
  1. //指定字体样式   
  2. context.font = "italic 30px 黑体";   
  3. //在点(40,40)处画文字   
  4. context.fillText("Hello world!", 40, 40);  

2.5 绘制图像
在绘制图像之前，需要先定义图像并加载。

CSS Code复制内容到剪贴板
  1. var img = new Image();   
  2. img.src = "myImage.png";   
  3. img.onload = function () {   
  4.     //图像加载完毕执行   
  5. };  

以下是drawImage API解释：

JavaScript Code复制内容到剪贴板
  1. //在(x,y)出绘制图像image   
  2. context.drawImage(image, x, y)   
  3. //在(x,y)出绘制width*height的图像image   
  4. context.drawImage(image, x, y, width, height)   
  5. //在image的(sx,sy)处截取sWidth*sHeight的图像，在(dx,dy)处绘制dWidth*dHeight的图像   
  6. context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)  

3. 高级功能
3.1 使Canvas填满浏览器窗口
最简单的方式是将canvas元素的宽度和高度精确设置为浏览器窗口的宽度和高度，用CSS消去白色空隙。
CSS代码：

CSS Code复制内容到剪贴板
  1. * {   
  2.     margin: 0;   
  3.     padding: 0;   
  4. }   
  5.   
  6. html, body {   
  7.     height: 100%;   
  8.     width: 100%;   
  9. }   
  10.   
  11. canvas {   
  12.     display: block;   
  13. }  

Javascript代码：

JavaScript Code复制内容到剪贴板
  1. function resizeCanvas() {   
  2.     //canvas由jQuery获取   
  3.     canvas.attr("width", $(window).get(0).innerWidth);   
  4.     canvas.attr("height", $(window).get(0).innerHeight);   
  5.     context.fillRect(0, 0, canvas.width(), canvas.height());   
  6. }   
  7. $(window).resize(resizeCanvas);   
  8. resizeCanvas();  

3.2 绘图状态
在canvas中，绘图状图指的是描述某一时刻2D渲染上下文外观的整套属性，包括：变换矩阵、裁剪区域、globalAlpha、globalCompositeOperation、strokeStyle、fillStyle、lineWidth、lineCap、lineJoin、miterLimit、shadowOffsetX、shadowOffsetY、shadowBlur、shadowColor、font、textAlign和textBaseline。
当需要改变画布全局状态时，一般先将当前状态保存起来——调用save方法将状态推入绘图状态栈），做完操作之后，再调用restore方法回复绘图状态。

JavaScript Code复制内容到剪贴板
  1. //示例   
  2. context.save();   
  3. context.globalAlpha = 0.5;   
  4. context.fillRect(0, 0, 200, 100);   
  5. context.restore();  

3.3 变形
3.3.1 平移
将2D渲染上下文的原点从一个位置移动到另一个位置。注意，这里移动的是坐标原点即全局绘图位置，API如下：

JavaScript Code复制内容到剪贴板
  1. //将坐标原点移动到(x,y)   
  2. context.translate(x, y)  

3.3.2 缩放

JavaScript Code复制内容到剪贴板
  1. //将全局横纵尺寸缩放至x,y倍（即在原有数值乘上倍乘因子）   
  2. context.scale(x, y)  

3.3.3 旋转

JavaScript Code复制内容到剪贴板
  1. //将画布绕着原点旋转radius弧度   
  2. context.rotate(radius)  
标签：
HTML5,Canvas
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com
www.zgmyg.com 岱庙资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
岱庙资源网 Copyright www.zgmyg.com