HTML5画布概述
2015-08-06 14:15
525 查看
本文提供了HTML5的画布基本用法的概述。概述被分成两部分:
声明一个HTML5 canvas元素。
绘图画布元素的图形。
上面的代码声明了一个
里面的文字
你应该把画布的HTML代码在你的网页在您想要在画布可见的位置。就像任何其他的HTML元素(如
这是违背SVG,在那里你可以单独操作的形状,并有全图重新绘制。在HTML5中,你将不得不重新绘制自己的一切,如果你想改变的绘制图。
一个HTML5 canvas元素使用JavaScript完成的画图,按照下列步骤:
等待页面被完全加载。
获取引用canvas元素。
获得canvas元素2D背景的。
绘制2D使用环境的抽奖功能的图形。
下面是一个简单的代码示例,说明上述步骤:
首先,事件侦听器功能被连接到窗口。当网页加载此事件侦听器的功能被执行。此函数调用我定义另一个函数,称为
二,
三,
四,
下面是执行代码时的外观:
声明一个HTML5 canvas元素。
绘图画布元素的图形。
声明canvas元素
首先,让我们来看看如何在一个HTML页面声明canvas元素:<canvas id="ex1" width="500" height="150" style="border: 1px solid #cccccc;"> HTML5 Canvas not supported </canvas>
上面的代码声明了一个
帆布带元素
的宽度设置为500,
高度设置为150,和
样式设置为颜色1像素边框
#CCCCCC。
里面的文字
画布元素将被忽略,如果浏览器支持HTML5的Canvas元素。如果不支持HTML5的画布元素,文本可能会被显示为在浏览器的普通文字。
你应该把画布的HTML代码在你的网页在您想要在画布可见的位置。就像任何其他的HTML元素(如
DIV元素)。
在Canvas元素绘制图形
绘制一个HTML5画布上的图形绘制在立即模式。直接模式意味着,只要你画的形状在画布上,在画布不再知道该形状什么。形状是可见的,但你不能单独操作的形状。它像一个真正的帆布画。涂一次,你就只剩下了彩色颜料/像素。这是违背SVG,在那里你可以单独操作的形状,并有全图重新绘制。在HTML5中,你将不得不重新绘制自己的一切,如果你想改变的绘制图。
一个HTML5 canvas元素使用JavaScript完成的画图,按照下列步骤:
等待页面被完全加载。
获取引用canvas元素。
获得canvas元素2D背景的。
绘制2D使用环境的抽奖功能的图形。
下面是一个简单的代码示例,说明上述步骤:
<script> // 1. wait for the page to be fully loaded. window.onload = function() { drawExamples(); } function drawExamples(){ // 2. Obtain a reference to the canvas element. var canvas = document.getElementById("ex1"); // 3. Obtain a 2D context from the canvas element. var context = canvas.getContext("2d"); // 4. Draw graphics. context.fillStyle = "#ff0000"; context.fillRect(10,10, 100,100); } </script>
首先,事件侦听器功能被连接到窗口。当网页加载此事件侦听器的功能被执行。此函数调用我定义另一个函数,称为
drawExamples()。
二,
drawExamples()函数中,使用所引用canvas元素
的document.getElementById()函数,将
IDcanvas元素,如在canvas元素的声明中定义。
三,
drawExamples()函数获取对从画布元素的2D背景下,通过调用
canvas.getContext(“2D”)以前获得的canvas元素上。
四,
()drawExamples函数调用各种绘图功能的2D上下文对象,从而导致图形上被绘制在画布上。
下面是执行代码时的外观:
相关文章推荐
- HTML5中在客户端验证文件上传的大小
- 原生js结合html5制作小飞龙的简易跳球
- 三个不常见的 HTML5 实用新特性简介
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- js+HTML5实现canvas多种颜色渐变效果的方法
- javascript+html5实现绘制圆环的方法
- HTML5实现微信拍摄上传照片功能
- 实现音乐播放器的代码(html5+css3+jquery)
- 2014 HTML5/CSS3热门动画特效TOP10
- HTML5使用DeviceOrientation实现摇一摇功能
- spring+html5实现安全传输随机数字密码键盘
- html5在android中的使用问题及技巧解读
- 非html5实现js版弹球游戏示例代码
- html5 canvas js(数字时钟)实例代码
- js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
- Jquery结合HTML5实现文件上传
- 使用js检测浏览器是否支持html5中的video标签的方法
- html5 file调用一般处理程序上传图片