canvas元素的定义:"它是依赖分辨率的位图画布,你可以在canvas上面绘制任意图形,甚至加载照片。"
要使用canvas 元素,首先必须设置width 和height 属性,也就是我们可以绘图的区域的大小。
<canvas width="100" height="100">这里放置后备信息,如果浏览器不支持canvas会显示</canvas>
canvas元素的定义:"它是依赖分辨率的位图画布,你可以在canvas上面绘制任意图形,甚至加载照片。"
要使用canvas 元素,首先必须设置width 和height 属性,也就是我们可以绘图的区域的大小。
<canvas width="100" height="100">这里放置后备信息,如果浏览器不支持canvas会显示</canvas>
var drawing = document.getElementById("canvas-area"); // 确定浏览器是否支持<canvas>元素 if (drawing.getContext) { var context = drawing.getContext("2d"); ... }
2D上下文两种基本操作是填充和描边
填充操作的结果取决于fillStyle 属性,而描边操作的结果取决于strokeStyle 属性。
var drawing = document.getElementById("canvas-area"); // 确定浏览器是否支持<canvas>元素 if (drawing.getContext) { var context = drawing.getContext("2d"); context.fillStyle = "#0000ff"; context.strokeStyle = "red"; }
矩形是唯一一种可以直接在2D上下文中绘制的形状。与矩形有关的方法包括:fillRect(), strokeRect()和clearRect()
这三个方法都能够接收四个参数:矩形的x坐标,矩形的y坐标,矩形宽度和矩形高度。单位都是像素。
var context = document.getElementById("canvas-area").getContext("2d"); context.fillRect(x, y, width, height); context.strokeRect(x, y, width, height); context.clearRect(x, y, width, height);
fillRect() 方法在画布上绘制的矩形会填充指定的颜色。填充的颜色通过fillStyle 属性指定。
// 绘制红色矩形 fillrect_context.fillStyle = "#ff0000"; fillrect_context.fillRect(50, 25, 200, 100); // 绘制半透明的蓝色矩形 fillrect_context.fillStyle = "rgba(0, 0, 255, 0.5)"; fillrect_context.fillRect(150, 75, 200, 100);
strokeRect() 方法在画布上绘制的矩形会使用指定的颜色描边。描边颜色通过strokeStyle 属性指定。
// 红色描边矩形 strokerect_context.strokeStyle = "#ff0000"; strokerect_context.strokeRect(50, 25, 200, 100); // 半透明的蓝色描边矩形 strokerect_context.strokeStyle = "rgba(0, 0, 255, 0.5)"; strokerect_context.strokeRect(150, 75, 200, 100);
clearRect() 方法用于清除画布上的矩形区域。通过绘制形状然后再清除指定的区域,就可以生成有意思的效果,比如把某个形状切掉一块。
// 绘制红色矩形 clearrect_context.fillStyle = "#ff0000"; clearrect_context.fillRect(50, 25, 200, 100); // 绘制半透明的蓝色矩形 clearrect_context.fillStyle = "rgba(0, 0, 255, 0.5)"; clearrect_context.fillRect(150, 75, 200, 100); // 在两个矩形重叠的区域清除掉一个小矩形 clearrect_context.clearRect(170, 95, 20, 20);
2D绘制上下文支持很多在画布上绘制路径的方法,通过路径可以创造出复杂的形状和线条。
要绘制路径首先必须调用beginPath() 方法, 表示要开始绘制新路径,然后再调用相应的绘制路径方法。
// 开始路径 pathcanvas_context.beginPath(); // 绘制外圆 pathcanvas_context.arc(100, 100, 75, 0, 2*Math.PI, false); // 绘制内圆 pathcanvas_context.moveTo(170, 100); pathcanvas_context.arc(100, 100, 70, 0, 2*Math.PI, false); // 绘制分针 pathcanvas_context.moveTo(100, 100); pathcanvas_context.lineTo(100, 35); // 绘制时针 pathcanvas_context.moveTo(100, 100); pathcanvas_context.lineTo(55, 100); // 描边路径 pathcanvas_context.stroke();
模拟了在网页中正常显示文本,fillText()方法的三个主要参数:要绘制的字符串,x坐标和y坐标。
context.font = "bold 12px sans-serif"; context.textAlign = "right"; context.textBaseline = "bottom"; context.fillText("x", 248, 43); context.fillText("y", 58, 165);
fillText以下面三个属性为基础:
通过上下文的变化,可以把处理后的图像绘制到画布上。2D绘制上下文支持各种基本的绘制变换。
在前面绘制秒针的例子中,如果我们把原点变换成表盘的中心,那么再绘制表针就容易多了。
context.beginPath(); context.arc(100, 100, 75, 0, 2*Math.PI, false); context.moveTo(170, 100); context.arc(100, 100, 70, 0, 2*Math.PI, false); // 变换原点 context.translate(100, 100); context.moveTo(0, 0); context.lineTo(0, -65); context.moveTo(0, 0); context.lineTo(-40, 0); context.stroke();
// 变换原点 context.translate(100, 100); //旋转表针 context.rotate(1); context.moveTo(0, 0); context.lineTo(0, -65); context.moveTo(0, 0); context.lineTo(-40, 0); context.stroke();
渐变是两种或者更多颜色的平滑过渡。canvas的绘图上下文支持两种类型的渐变:
var my_gradient = context.createLinearGradient(0, 0, 500, 0); my_gradient.addColorStop(0, "black"); my_gradient.addColorStop(1, "white"); context.fillStyle = my_gradient; context.fillRect(0, 0, 500, 300);
使用drawImage()可以把一幅图像绘制到画布上,根据期望的最终结果的不同,drawImage()提供了三种绘制图片的方法:
var android = new Image(); android.src = "images/android.png"; android.onload = function() { for(var x=0, y=0; x<800 & y<500; x+=50, y+=30) { context.drawImage(android, x, y, 100, 117); } }
var imgURI = imagedrawing.toDataURL("image/png"); var image = document.createElement("img"); image.src = imgURI; document.getElementById("canvas-images-export").appendChild(image);
<video id="myMovie" src="images/sample.m4v" preload controls autoplay>视频播放器不可用。</video> <audio id="myAudio" src="images/song.mp3"></audio>
因为并非所有的浏览器都支持所有的媒体格式,所以可以指定多个不同的媒体来源。像下面这样使用一个或多个<source>元素。
<video id="videoShowcase" width="848" height="352" poster="/images/poster.jpg" autobuffer="autobuffer" loop="loop" controls> <source src="/images/demo.m4v" type="video/mp4; codecs="avc1.42E01E, mp4a.40.2""> <source src="/images/demo.webm" type="video/webm; codecs="vp8, vorbis""> </video>
属性 | 数值类型 | 说明 |
---|---|---|
autoplay | 布尔值 | 取得或设置autoplay标志 |
controls | 布尔值 | 取得或者设置controls属性,用于隐藏或者显示浏览器内置的控件 |
duration | 浮点数 | 媒体的总播放时间(秒数) |
ended | 布尔值 | 表示媒体是否播放完成 |
muted | 布尔值 | 取得或设置媒体文件是否静音 |
paused | 布尔值 | 表示播放器是否暂停 |
readyState | 布尔值 | 表示媒体文件是否已经就绪 |
volume | 浮点数 | 取得或设置当前音量 |
使用video和audio的play和pause方法,可以手工控制媒体文件的播放。组合使用属性,事件和这两个方法,很容创建一个自定义的媒体播放器
<div class="mediaplayer"> <div class="video"> <video id="player" src="../images/demo.m4v" poster="mymovie.jpg" width="300" height="200"> Video player not available. </video> </div> <div class="controls"> <input type="button" value="Play" id="video-btn"> <span id="curtime">0</span>/<span id="duration">0 </div> </div>
window.onload = function(){ var player = document.getElementById("player"); var btn = document.getElementById("video-btn"); var curtime = document.getElementById("curtime"); var duration = document.getElementById("duration"); duration.innerHTML = player.duration; EventUtil.addHandler(btn, "click", function(event){ if (player.paused){ player.play(); btn.value = "Pause"; } else { player.pause(); btn.value = "Play"; } }); setInterval(function(){ curtime.innerHTML = player.currentTime; }, 250); };
<audio id="drums" controls> <source src="sounds/ogg/drums.ogg" type="audio/ogg"> <source src="sounds/mp3/drums.mp3" type="audio/mpeg"> <a href="sounds/mp3/drums.mp3">下载 drums.mp3 </audio>
<video controls> <source src="video/h264/01_blur.mp4"> <source src="video/theora/01_blur.ogv"> <source src="video/webm/01_blur.webm"> </video>
RGraph 是用JavaScript写的HTML5 图表库,使用HTML5 canvas进行绘制,并且支持超过20种不同的图表类型。
在浏览器中使用JavaScript绘制图表, 意味着页面大小更小,速度更快和服务器负载更低。
<script type="text/javascript" src="../libraries/RGraph.common.core.js" ></script> <script type="text/javascript" src="../libraries/RGraph.bar.js" ></script> ... <canvas id="cvs" width="600" height="250">[No canvas support]</canvas> <script> window.onload = function () { var bar = new RGraph.Bar('cvs', [5,4,1,6,8,5,3]); bar.Set('chart.labels', ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']); bar.Draw(); } </script>