• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    调用HTML5的Canvas API绘制图形的快速入门指南

    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个像素。具体如下图：

    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绘制矩形和圆形的实例代码
    下一篇：基于HTML5 的人脸识别活体认证的实现方法
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯

    时间：9:00-21:00 (节假日不休)

    地址：江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

    调用HTML5的Canvas API绘制图形的快速入门指南 调用,HTML5,的,Canvas,API,绘,