Canvas:用脚本绘制图形
- 绘制图表
- 制作图片
- 制作动画
1、开始之前
默认大小：300px*150px
2、基本用法
1.canvas元素
- 例：
<canvas id="tutorial" width="150" height="150"></canvas> - 属性：
width和heightid - 替换内容
如果不需要替代内容，<canvas id="foo" ...></canvas> 在所有支持canvas的浏览器中都是完全兼容的。 </canvas>标签不可省
2.渲染上下文
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
使用 document.getElementById() 方法来为 元素得到DOM对象。
使用对象的getContext() 方法来访问绘画上下文。
检查支持性
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}
3.模板框架
<html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body "draw();">
<canvas id="tutorial" width="150" height="150"></canvas>
</body>
</html>
4.案例
<html>
<head>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
}
</script>
</head>
<body "draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
4272
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
