Loading... ## 一、canvas 简介 `<canvas>` 是 `HTML5` 新增的,一个可以使用脚本(通常为 `JavaScript`) 在其中绘制图像的 `HTML` 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处理和渲染。 它最初由苹果内部使用自己 `MacOS X WebKit` 推出,供应用程序使用像仪表盘的构件和 `Safari` 浏览器使用。后来,有人通过 `Gecko` 内核的浏览器 (尤其是 `Mozilla`和`Firefox`),`Opera` 和 `Chrome` 和超文本网络应用技术工作组建议为下一代的网络技术使用该元素。 `Canvas` 是由 `HTML` 代码配合高度和宽度属性而定义出的可绘制区域。`JavaScript` 代码可以访问该区域,类似于其他通用的二维 `API`,通过一套完整的绘图函数来动态生成图形。 Mozilla 程序从 Gecko 1.8 (Firefox 1.5) 开始支持 `<canvas>`, Internet Explorer 从 IE9 开始 `<canvas>` 。Chrome 和 Opera 9+ 也支持 `<canvas>`。 --- ## 二、Canvas基本使用 ```html <canvas id="tutorial" width="300" height="300"></canvas> ``` ## 学习 HTML5 Canvas 这一篇文章就够了 ### *分类* [编程技术](https://www.runoob.com/w3cnote_genre/code "编程技术") ## 一、canvas 简介 `<canvas>` 是 `HTML5` 新增的,一个可以使用脚本(通常为 `JavaScript`) 在其中绘制图像的 `HTML` 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处理和渲染。 它最初由苹果内部使用自己 `MacOS X WebKit` 推出,供应用程序使用像仪表盘的构件和 `Safari` 浏览器使用。后来,有人通过 `Gecko` 内核的浏览器 (尤其是 `Mozilla`和`Firefox`),`Opera` 和 `Chrome` 和超文本网络应用技术工作组建议为下一代的网络技术使用该元素。 `Canvas` 是由 `HTML` 代码配合高度和宽度属性而定义出的可绘制区域。`JavaScript` 代码可以访问该区域,类似于其他通用的二维 `API`,通过一套完整的绘图函数来动态生成图形。 Mozilla 程序从 Gecko 1.8 (Firefox 1.5) 开始支持 `<canvas>`, Internet Explorer 从 IE9 开始 `<canvas>` 。Chrome 和 Opera 9+ 也支持 `<canvas>`。 --- ## 二、Canvas基本使用 ```html <canvas id="tutorial" width="300" height="300"></canvas> ``` ### 2.1 `<canvas>` 元素 `<canvas>` 看起来和 `<img>` 标签一样,只是 `<canvas>` 只有两个可选的属性 `width、heigth` 属性,而没有 `src、alt` 属性。 如果不给 `<canvas>` 设置 `widht、height` 属性时,则默认 `width`为300、`height` 为 150,单位都是 `px`。也可以使用 `css` 属性来设置宽高,但是如宽高属性和初始比例不一致,他会出现扭曲。所以,建议永远不要使用 `css` 属性来设置 `<canvas>` 的宽高。 **替换内容** 由于某些较老的浏览器(尤其是 IE9 之前的 IE 浏览器)或者浏览器不支持 HTML 元素 `<canvas>`,在这些浏览器上你应该总是能展示替代内容。 支持 `<canvas>` 的浏览器会只渲染 `<canvas>` 标签,而忽略其中的替代内容。不支持 `<canvas>` 的浏览器则 会直接渲染替代内容。 用文本替换: ```html <canvas> 你的浏览器不支持 canvas,请升级你的浏览器。 </canvas> ``` 用 `<img>` 替换: ```html <canvas> <img src="./美女.jpg" alt=""style=""> </canvas> ``` 结束标签 `</canvas>` 不可省略。 与 `<img>` 元素不同,`<canvas>` 元素需要结束标签(`</canvas>`)。如果结束标签不存在,则文档的其余部分会被认为是替代内容,将不会显示出来。 ### 2.2 渲染上下文(Thre Rending Context) `<canvas>` 会创建一个固定大小的画布,会公开一个或多个**渲染上下文** (画笔),使用**渲染上下文** 来绘制和处理要展示的内容。 我们重点研究 2D 渲染上下文。 其他的上下文我们暂不研究,比如, WebGL 使用了基于 OpenGL ES的3D 上下文 ("experimental-webgl") 。 ```js var canvas = document.getElementById('tutorial'); //获得 2d 上下文对象 var ctx = canvas.getContext('2d'); ``` ### 2.3 检测支持性 ```js var canvas = document.getElementById('tutorial'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); // drawing code here } else { // canvas-unsupported code here } ``` - 参考文章 原文作者: 做人要厚道2013 原文地址:https://blog.csdn.net/u012468376/article/details/73350998 - [菜鸟教程](https://www.runoob.com/w3cnote/html5-canvas-intro.html) - [csdn](https://blog.csdn.net/u012468376/article/details/73350998) 最后修改:2021 年 06 月 28 日 © 允许规范转载 打赏 赞赏作者 微信 赞 0 如果觉得我的文章对你有用,请随意赞赏
此处评论已关闭