Canvas的基本介绍及简单应用

2023-04-14 08:05| 来源: 网络整理| 查看: 265

神奇且强大的canvas 一．Canvas的基本介绍

１．什么是Canvas

定义：是HTML5提供的一种新标签, ie9才开始支持的，Canvas是一个矩形区域的画布，可以用JS控制每一个像素在上面绘画。canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

２．Canvas主要应用的领域

1 可视化数据：各类统计图表，比如:百度的echart

2 场景秀：用Canvas实现动态的广告效果能够非常融洽的跨平台运行。如:手机中微产品.在移动端兼容性很好

3 游戏： canvas在基于Web的图像显示方面比Flash更加立体、更加精巧，canvas成为HTML5小游戏开发首选。现阶段h5做游戏,营业方式不是很明确. 25 超棒的 HTML5 Canvas 游戏

4 其他可嵌入网站的内容 (多用于活动页面、特效)：类似图表、音频、视频，还有许多元素能够更好地与Web融合，并且不需要任何插件。

5 趋势=> 模拟器：无论从视觉效果还是核心功能方面来说，模拟器产品可以完全由JavaScript来实现。模拟真实硬件环境,如移动端各种类型手机.

6 趋势=> 远程计算机控制： Canvas可以让开发者更好地实现基于Web的数据传输，构建一个完美的可视化控制界面。

7 趋势=> 图形编辑器： Photoshop图形编辑器将能够100%基于Web实现。

８版本支持

最新标准：http://www.w3.org/TR/2dcontext/

稳定版本的标准：http://www.w3.org/TR/2013/CR-2dcontext-20130806/

３．Canvas绘制线条

０１Canvas标签语法和属性

canvas：画布油布的意思英 ['kænvəs] 美 ['kænvəs] 标签名：canvas，双标签，需要闭合。单位： px，可以设置width和height属性，否则忽略单位。 width和hegiht：默认300*150像素

注意：

不要用CSS控制它的宽和高,会导致内部图片被拉伸，重新设置canvas标签的宽高属性会让画布擦除所有的内容可以给canvas画布设置背景色

０２　浏览器不兼容处理

ie9以上才支持canvas, 其他chrome、Safari、Opera等都支持

只要浏览器兼容canvas，那么就会支持绝大部分api(个别最新api除外)

移动设备几乎支持Canvas的所有API

2d的支持的都非常好，3d（webgl）ie11才支持，其他都支持

如果浏览器不兼容，最好进行友好提示

ｅｇ：你的浏览器不支持canvas，请升级浏览器.浏览器不支持，显示此行文本

如果浏览器不兼容，可以使用flash等方式进行替换。

４．Canvas绘图上下文context

０１ Context：Canvas的上下文、绘制环境。

上下文：是所有的绘制操作api的入口或者集合。

Canvas自身无法绘制任何内容，Canvas的绘图是使用JS调用Canvas的接口来完成的。

Context对象就是JavaScript操作Canvas的接口。

使用[CanvasElement].getContext(‘2d’)来获取2D绘图上下文

ｅｇ： //获得画布 var canvas = document.getElementById( 'cavsElem' ); //注意：2d小写，二维， 3d：webgl var ctx = canvas.getContext( '2d' );

５．基本的绘制路径

５．１Ｃanvas绘制的基本说明

canvas坐标系，从最左上角0,0开始。x向右增大， y向下增大绘制起点：ctx.moveTo(x, y); //x,y 都是相对于 canvas盒子的最左上角。绘制终点：ctx.lineTo(x, y); //从x,y的位置绘制一条直线到起点或者上一个线头点。开始路径：ctx.beginPath();作用：将当路径和之前路径隔离,方便你对当前路径进行设置样式,线宽. 闭合路径：ctx.closePath();作用：闭合路径会自动把最后的线头和开始的线头连在一起。描边：ctx.stroke();

５．２Canvas绘制的基本步骤：

第一步：获得上下文 =>canvasElem.getContext('2d');

第二步：开始路径规划 =>ctx.beginPath()

第三步：移动起始点 =>ctx.moveTo(x, y)

第四步：绘制(点、线、面、图片...) =>ctx.lineTo(x, y)

第五步：闭合路径 =>ctx.closePath();

第六步：绘制描边 =>ctx.stroke();

ｅｇ：你的浏览器不支持canvas，请升级浏览器.浏览器不支持，显示此行文本 //1.获取canvas var canvas = document.getElementById('canvas'); //2.获取上下文 var ctx = canvas.getContext('2d'); //3.绘制一条直线 //起点 ctx.moveTo(100,100); //终点 ctx.lineTo(300,100); //注意:以上只是对当前路径进行描述,表示的是路径的状态,并没有进行绘制操作 //线宽 ctx.lineWidth = 10; //颜色 ctx.strokeStyle = 'red'; //绘制描边 ctx.stroke(); //4.绘制第二条线 //开启路径.作用:将当路径和之前路径隔离,方便你对当前路径进行设置样式,线宽. ctx.beginPath(); ctx.moveTo(200,50); ctx.lineTo(200,250); //5.绘制第三条线段 ctx.lineTo(300,300); //闭合路径: 作用:将开始的线头和结束的线头连接 ctx.closePath(); ctx.strokeStyle = 'green'; ctx.lineWidth = 5; //描边 ctx.stroke(); 二.Canvas绘制的基本应用

2.1 Canvas绘制表格-背景

eg: //1.获取canvas和上下文 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); //2.设置常量 var marginWH = 10;//表示每一个格子之间的空格距离 //计算行和列 var row = canvas.height / marginWH; var col = canvas.width / marginWH; /* * 绘制背景网格 * */ //3.绘制横线 for(var i = 0;i

【本文地址】

公司简介

联系我们