当前位置:Gxlcms > html代码 > HTML5绘制图像(上)之:关于canvas元素引领下一代web页面的问题_html5教程技巧

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

时间:2021-07-01 10:21:17 帮助过:13人阅读

初识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画的圆





原谅我这里居然思考了半个小时,我甚至搜索了高中的资料。。。。

于是我好像明白了点什么。。。。。。

moveTo与lineTo

现上实验结果:

代码如下:

两次moveto




人气教程排行