HTML标签canvas

小鱼儿 2023-02-08 12:57 15阅读 0赞

`<canvas>` 是一个可以使用脚本(通常为[JavaScript][])在其中绘制图形的 [HTML][] 元素.它可以用于制作照片集或者制作简单(也可以是不简单)的动画. 右边的图片展示了一些`<canvas>` 的应用,在这个教程后面我们将看到.

`<canvas>` 最早被Apple引入,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现. 基于[Gecko][] 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素. `<canvas>` 元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中.

这个教程将描述如何在你的HTML页面中使用`<canvas>元素`. 这些例子为你提供了一些清晰的思路关于你可以用<canvas>来做什么以及如何开始你自己的实践.

## 开始之前 ##

使用 `<canvas>` 元素不是非常难但你需要一些基本的HTML和JavaScript知识.

`<canvas>` 元素不被一些老的浏览器所支持, 但被支持于Firefox 1.5+, Opera 9+, 新版本的Safari, Chrome, 以及Internet Explorer 9.

所以：在中间加提示信息

<canvas id="canvas">不支持该标签</canvas>

<canvas id="myCanvas" width="300px" height="300px" style="border:1px solid #c3c3c3;">不支持canvas标签</canvas>
    	<script>
    		var canvas=document.getElementById('myCanvas');
    		if(canvas.getContext){
    			var d2=canvas.getContext('2d');
    			d2.fillStyle='#ff0';
    			d2.fillRect(0,0,100,100);
    
    			d2.moveTo(100,100);
    			d2.lineTo(250,50);
    			d2.lineTo(100,50);
    			d2.stroke();
    		}
    	</script>

![Center][]

[JavaScript]: https://developer.mozilla.org/en-US/docs/JavaScript
[HTML]: https://developer.mozilla.org/en-US/docs/HTML
[Gecko]: https://developer.mozilla.org/en-US/docs/Gecko
[Center]: /images/20230208/79b23e26abe14aed90666dd33a7b0d08.png

发表评论取消回复

表情：

评论列表（有 0 条评论，15人围观）

还没有评论，来说两句吧...

相关阅读

相关 html5 canvas 标签

anvas标签有两大作用，一是与 2d 的汇合，二是与3d的汇合，其中3d处使用的是 webgl 注意：webgl的y轴正方向由窗口的下方往上，而2d canvas的...

桃扇骨/ 2024年04月17日 05:51/ 0 赞/ 55 阅读

相关 HTML标签canvas

`<canvas>` 是一个可以使用脚本(通常为[JavaScript][])在其中绘制图形的 [HTML][] 元素.它可以用于制作照片集或者制作简单(也可以是不简单)的动画

小鱼儿/ 2023年02月08日 12:57/ 0 赞/ 16 阅读

相关 HTML5 canvas 图形标签的用法快速入门

HTML5 canvas 图形标签的用法快速入门 canvas就是画布，是一个矩形区域，用于在网页上绘制2D图形和图像。canvas 拥有多种绘制路径、矩形、圆形、字符以

怼烎@/ 2023年01月09日 12:33/ 0 赞/ 160 阅读

相关 HTML5：Canvas 标签

什么是 canvas？ H5 `<canvas>` 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。`<canvas>` 标签只是图形容器，必须使用脚本

逃离我推掉我的手/ 2022年10月11日 13:33/ 0 赞/ 332 阅读

相关 html canvas 绘制倒影,canvas

JavaScript let t = 0; const colors = \["\161616", "\cf894c", "\c74962"\]; const canva

系统管理员/ 2022年10月10日 06:24/ 0 赞/ 280 阅读

相关 html5 canvas word,HTML5 Canvas

Canvas 转为图片我们可以使用 Canvas2image 库将 canvas 转换为图片。使用方式如下： Canvas2Image.saveAsImage(can

朴灿烈づ我的快乐病毒、/ 2022年10月07日 12:47/ 0 赞/ 279 阅读

相关【HTML5】——Canvas

Canvas是HTML5中所有新特性中目前应用最广泛的一个，可以替代引入的图片（图形）用途：完成HTML页面中的图形绘制，实现网络游戏或单击游戏（网页游戏），在HTML中

曾经终败给现在/ 2022年06月07日 03:44/ 0 赞/ 383 阅读

相关 html——canvas

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"><!--文档的元数

叁歲伎倆/ 2022年01月06日 04:27/ 0 赞/ 209 阅读

相关 HTML5的canvas新标签以及拖放

今天重新练习了一下H5的画布结合拖放的使用，以下是实现的代码： <!doctype html> <html lang="en"> <head>

超、凢脫俗/ 2021年10月26日 16:34/ 0 赞/ 364 阅读

相关用HTML5的canvas标签画虚线

原生代码 function drawDashLine(ctx, x1, y1, x2, y2, dashLength){ //ctx 声明的

深藏阁楼爱情的钟/ 2021年09月14日 09:26/ 0 赞/ 663 阅读