HTML 5 基础教程

HTML是超文本标记语言，是一种专门用来制作网页的语言，而HTML5就是它的第五个版本，2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成，该标准针对当前互联网的飞速发展制定了更加标准的网页语言规范及适用功能，同时也给我们开发者带来了更多的开发选择，学习它是每个前端开发者必修的课程。

W3CAPI

2020-06-15 06:59:35

文档目录

我的书签

请登录

HTML5 Canvas 使用方法

掌握一个新的开发知识，需要了解它是怎么使用的？按照什么样的步骤操作的？HTML5 Canvas 的使用方法如下步骤：

一、在页面中创建 Canvas 标签

我们可以直接向 HTML5 页面中添加 canvas 标签元素并规定标签元素的 id（指定id要在后续步骤中使用）、宽度和高度（默认情况下 <canvas> 标签元素没有边框和内容，这里指定它的宽、高和边框）：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

二、通过 JavaScript 来动态绘制和处理图形

canvas 元素本身是没有绘图能力的。所有的绘制工作必须使用 JavaScript 来完成，按照如下步骤即可：

使用dom通过id获取canvas对象：var c=document.getElementById("myCanvas");
创建画布的上下文对象 context（此对象是HTML5 的内置对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法，使用getContext("2d") 函数来获取）准备绘制：var ctx=c.getContext("2d");
使用上下文对象 context 的方法来绘制和处理图形

如下代码：

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
//绘制一个红色的矩形
cxt.fillStyle="#FF0000"; //设置矩形填充颜色为红色，fillStyle属性值可以是CSS颜色、渐变或图案。fillStyle 默认设置是#000000（黑色）
cxt.fillRect(0,0,150,75); //设置矩形的位置、大小和尺寸，fillRect(x,y,width,height) 方法定义了矩形当前的填充方式
</script>

作者文档