在HTML5中<canvas>元素能够为你供应一种运用JavaScript来绘制图形的简朴而壮大的要领。它能够用于绘制图形,合成制造照片或做简朴(而不是那末简朴)的动画。【相干视频教程引荐:HTML5教程】
<canvas>是一个简朴的元素,它只要两个特定属性“width”和“height”以及一切中心HTML5属性,如id,name和class等。
<canvas id = "mycanvas" width = "100" height = "100"></canvas>
你能够运用getElementById()要领在DOM中轻松找到<canvas>元素,以下所示:
var canvas = document.getElementById("mycanvas");
衬着上下文
<canvas>最初是空缺的,为了显现某些内容,剧本起首须要接见衬着上下文并在其上绘制。
canvas元素有一个DOM要领,名为getContext()要领,具有猎取衬着上下文及其画图功用。此函数采纳一个参数,即context2d的范例。
以下是猎取所需上下文的代码,并搜检浏览器是不是支撑<canvas>元素
var canvas = document.getElementById("mycanvas"); if (canvas.getContext) { var ctx = canvas.getContext('2d'); // 此处是画图代码 } else { // 此处不支撑canvas代码 }
canvas的示例:绘制矩形
<!DOCTYPE HTML><html> <head> <style> #test { width: 100px; height:100px; margin: 0px auto; } </style> <script type = "text/javascript"> function drawShape() { // 运用DOM猎取画布元素 var canvas = document.getElementById('mycanvas'); // 确保在不支撑 canvas 时不实行 if (canvas.getContext) { // 运用 getContext 来实行 canvas 绘制 var ctx = canvas.getContext('2d'); // 画外形 ctx.fillRect(25,25,100,100); ctx.clearRect(45,45,60,60); ctx.strokeRect(50,50,50,50); } else { alert('你须要运用Safari或Firefox 1.5+的浏览器才看到此演示。'); } } </script> </head> <body id = "test" onload = "drawShape();"> <canvas id = "mycanvas"></canvas> </body> </html>
效果图:
申明:
在画布上绘制矩形有三种要领:
这里x和y指定矩形左上角的画布上的位置(相对于原点),宽度和高度是矩形的宽度和高度。
总结:以上就是本篇文的全部内容,愿望能对人人的进修有所协助。
以上就是html5的Canvas元素有什么作用?<Canvas>的简朴运用的细致内容,更多请关注ki4网别的相干文章!