canvas 基本用法
-
了解canvas
canvas 是一个可以使用脚本来绘制图形HTML元素。可以用于绘制图形，制作图片或者制作简单的动画 -
基本用法
<canvas id='tudorial' width='150' height='150'> </canvas>
canvas 看起来跟 img 元素很像，不同的是没有 src 和 alt 属性，当没有设置宽度和高度的时候，canvas 会初始化宽度为 300px 和 150px 该元素可以使用 css 来定义大小，但绘制图形时会伸缩以适应它的框架尺寸: 如果 css 尺寸与初始化比例不一致会发生扭曲
canvas元素需要结束标签。如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来。
- 检查支持性
getContext() 是用来获得渲染上下文和绘画功能，接受一个参数，上下文类型
const ctx = canvas.getContext('2d')
可以通过简单测试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>
<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 onload="draw();">
<canvas id="tutorial" width="150" height="150"></canvas>
</body>
</html>
例子:
<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)";
/* 参数:
1. 矩形左上角的 x 坐标
2. 矩形左上角的 y 坐标。
3. 矩形的宽度，以像素计。
4. 矩形的高度，以像素计。
*/
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
