HTML5每日一练之Canvas标签的应用-在页面上放置Canvas
今天我们将要学习在HTML5中最吸引眼球的一个标签——Canvas,我相信有很多人学习HTML5就是为了Canvas。这节内容非常简单,主要是为大家介绍Canvas标签的使用。
在我们学习它之前稍微补充一下知识,虽然有点理论,但以下稍微理论点的东西还是很有用的。
Canvas标签的基础知识:
canvas是HTML5中新增加的一个重要元素,专门用来绘制图形。在页面上放置一个canvas元素,就相当于在页面上放置了一个“画布”,如果您做过Flash,可以理解为Flash中的“舞台”,我们可以在这里面进行描绘。
必须要注意的是,我们在canvas中绘图,并不是我们拿鼠标在上面来作画。事实上canvas元素只是一块无色透明的区域(就像一个只有宽度高度无背景的div一样)需要使用JavaScript编写脚本在其中绘画。
Q:那么有些HTML5的网站,也是canvas,为什么鼠标在上面就能画画呢?
A:这是因为JS脚本捕获的鼠标的路径而作画,并非真正是鼠标来作画的,只是从视觉上感觉是鼠标来作画。就连PhotoShop我们从编程的角度来讲也不能说是鼠标在作画,而是捕获的鼠标路径和动作,程序在其绘画的。
在页面上放置一个canvas标签
一般一个基本的canvas由属性id、width和height共同组成,代码如下:
在我们学习它之前稍微补充一下知识,虽然有点理论,但以下稍微理论点的东西还是很有用的。
Canvas标签的基础知识:
canvas是HTML5中新增加的一个重要元素,专门用来绘制图形。在页面上放置一个canvas元素,就相当于在页面上放置了一个“画布”,如果您做过Flash,可以理解为Flash中的“舞台”,我们可以在这里面进行描绘。
必须要注意的是,我们在canvas中绘图,并不是我们拿鼠标在上面来作画。事实上canvas元素只是一块无色透明的区域(就像一个只有宽度高度无背景的div一样)需要使用JavaScript编写脚本在其中绘画。
Q:那么有些HTML5的网站,也是canvas,为什么鼠标在上面就能画画呢?
A:这是因为JS脚本捕获的鼠标的路径而作画,并非真正是鼠标来作画的,只是从视觉上感觉是鼠标来作画。就连PhotoShop我们从编程的角度来讲也不能说是鼠标在作画,而是捕获的鼠标路径和动作,程序在其绘画的。
在页面上放置一个canvas标签
一般一个基本的canvas由属性id、width和height共同组成,代码如下:
- <canvas id="W3Cfuns_canvas" width="400" height="300"/>
【HTML5每日一练之Canvas标签的应用-在页面上放置Canvas】相关文章
1. HTML5每日一练之Canvas标签的应用-在页面上放置Canvas
2. HTML5每日一练之Canvas标签的应用-绘制径向渐变图形
3. HTML5每日一练之Canvas标签的应用-绘制坐标变换图形
4. HTML5每日一练之Canvas标签的应用-坐标变换与路径结合使用
8. HTML5每日一练之Canvas标签的应用-绘制向日葵
10. HTML5每日一练之Canvas标签的应用-绘制线性渐变图形
本文来源:https://www.51html5.com/a616.html
﹝HTML5每日一练之Canvas标签的应用-在页面上放置Canvas﹞相关内容
- HTML5每日一练之progress标签的应用
- HTML5每日一练之视频标签的应用
- HTML5每日一练之figure新标签的应用
- HTML5每日一练之details展开收缩标签的应用
- HTML5每日一练之mark标签的应用
- HTML5每日一练之meter标签的应用
- HTML5每日一练之FileList文件列表对象的应用
- HTML5每日一练之datalist标签自动补全的使用
- HTML5每日一练之OL列表的改良
- CSS3每日一练之选择器-插入文字