HTML5绘制图像(上)之:关于canvas元素引领下一代web页面的问题_html5教程技巧

来源：动视网责编：小采时间：2020-11-27 15:18:08

HTML5绘制图像(上)之:关于canvas元素引领下一代web页面的问题_html5教程技巧

HTML5绘制图像(上)之:关于canvas元素引领下一代web页面的问题_html5教程技巧:初识canvas元素 HTML5新增了一个元素canvas，用于绘图使用，其实它的表现和div比较接近（其实他应该属于inline-block），而提供了许多接口，从而轻易的绘制矩形框、园三角形等 PS：关于HTML5新增元素经过最近两天的学习，和以前对HTML5的认知，我认为

推荐度：

点击下载本文 文档为doc格式

导读HTML5绘制图像(上)之:关于canvas元素引领下一代web页面的问题_html5教程技巧:初识canvas元素 HTML5新增了一个元素canvas，用于绘图使用，其实它的表现和div比较接近（其实他应该属于inline-block），而提供了许多接口，从而轻易的绘制矩形框、园三角形等 PS：关于HTML5新增元素经过最近两天的学习，和以前对HTML5的认知，我认为

初识canvas元素

HTML5新增了一个元素canvas，用于绘图使用，其实它的表现和div比较接近（其实他应该属于inline-block），而提供了许多接口，从而轻易的绘制矩形框、园三角形等

PS：关于HTML5新增元素

经过最近两天的学习，和以前对HTML5的认知，我认为HTML5其实还是HTML4，两者之间没多大的区别，无非是增加了点新东西。
我认为HTML5为我们带来的真正意义是：我们可以用javascript做更多的事情了；我们可以用javascript实现更好的产品了。比如HTML5就解决了我们头疼的跨域问题、实时通信API、与现在的canvas之所以HTML5叫HTML5，我认为他是划时代的，比如他让我们用网页开发游戏变成可能；比如他让电脑桌面只剩IE不在是传说（过于夸张）

绘制矩形框

直入正题，我们来绘制一个矩形框看看,这里提供一个颜色选择器用于方便的选择颜色，PS：现在不用jquery编程感觉真麻烦。。

问题：定义样式与定义height与width

一来就遇到了问题，我这里先来截个图：

代码如下:

1、使用getElementById方法获取绘制对象2、取得上下文getContext('2d')，这都是固定的写法3、指定填充的颜色fillStyle和绘制的颜色strokeStyle，即里面的颜色和边框的颜色4、指定线宽linewidth5、填充/绘制 fillRect/strokeRect 参数为 x,y,width,height6、若是要使其中一块透明，使用clearRect

至此，绘制矩形框便暂时告一段落。

绘制圆形

现在我们来绘制圆形，这个说起绘制圆形，其实我原来用js好像写过一个，这里也贴出来看看：

代码如下:
我是纯js画的圆

① 创建路径

② 创建图形路径

③ 路径创建完成后关闭路径

④ 设定绘制样式调用方法绘制之

代码如下:
我是一个圆