更新时间:2021-09-20 来源:黑马程序员 浏览量:
canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像。canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度。JavaScript代码可以访问该地区,通过一套完整的绘图功能类似于其他通用二维的API,从而生成动态的图形。
创建canvas标签,首先我们需要有一个画布(Canvas)
<canvas id="canvas" width="150" height="150"></canvas>
渲染上下文
创建画布之后,怎么使用了,需要在javascript中获取到画布并渲染上下文。
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
代码的第一行通过使用 document.getElementById() 方法来为 <canvas> 元素得到DOM 对象。一旦有了元素对象,你可以通过使用它的getContext()方法来访问绘画上下文。
创建canvas标签时可以在标签内写上不支持的信息,如该浏览器不支持canvas。
<canvas id="canvas" width="150" height="150">该浏览器不支持 canvas</canvas>
同时也可以通过检测 getContext()方法是否存在来测试是否支持编程
var canvas = document.getElementById('tutorial');if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here} else {
// canvas-unsupported code here
}
##来看一下最基本的模板
<html>
<head>
<title>Canvas tutorial</title>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="draw();">
<canvas id="tutorial" width="150" height="150"></canvas><script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
</body>
</html>
1、游戏:游戏在 HTML5 领域具有举足轻重的地位。HTML5 在基于 Web 的图像显示方面比Flash更加立体、更加精巧,Ohad认为运用canvas制作的图像能够令HTML5游戏在 流畅度和跨平台方面发挥更大的潜力。
2、图表制作:现在一些开发者使用HTML/CSS完成图标制作,但完全可以用canvas来实现。当然,使用SVG(可缩放矢量图形)来完成图表制作也是非常好的方法。(例如:echarts.js heightchart.js都是基于canvas来绘图!)
猜你喜欢: