1. 初始化与长方形与重置
HTML5的Canvas是
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css" media="all">
.pos {
text-align: center;
}
.canvas {
border: 1px solid #ccc;
}
</style>
<title>html5 canvas</title>
</head>
<body>
<div class="pos">
<canvas id="a1" class="canvas" width="300" height="200"></canvas>
</div>
</body>
<script type="text/javascript" charset="utf-8">
var a_canvas = document.getElementById("a1");
var a_context = a_canvas.getContext("2d");
a_context.fillRect(10, 20, 30, 40);
a_context.clearRect(10, 20, 10, 10);
setTimeout(function () {
a_canvas.width = a_canvas.width;
}, 3000);
</script>
</html>
首先寻找到canvas的位置，然后使用getContext初始化上下文环境，使用fillRect填充一个矩形，使用clearRect清除矩形，再之后是添加了一个三秒的延时，重置布画
2. 绘制一个网格坐标系
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css" media="all">
.pos {
text-align: center;
}
.canvas {
border: 1px solid #ccc;
}
</style>
<title>html5 canvas</title>
</head>
<body>
<div class="pos">
<canvas id="a1" class="canvas" width="500" height="375"></canvas>
</div>
</body>
<script type="text/javascript" charset="utf-8">
var a_canvas = document.getElementById("a1");
var context = a_canvas.getContext("2d");
for (var x = 0.5; x < 500; x += 10) {
context.moveTo(x, 0);
context.lineTo(x, 375);
}
for (var y = 0.5; y < 375; y += 10) {
context.moveTo(0, y);
context.lineTo(500, y);
}
context.strokeStyle = "#eee";
context.stroke();
context.beginPath();
context.moveTo(0, 40);
context.lineTo(240, 40);
context.moveTo(260, 40);
context.lineTo(500, 40);
context.moveTo(495, 35);
context.lineTo(500, 40);
context.lineTo(495, 45);
context.moveTo(60, 0);
context.lineTo(60, 153);
context.moveTo(60, 173);
context.lineTo(60, 375);
context.moveTo(65, 370);
context.lineTo(60, 375);
context.lineTo(55, 370);
context.strokeStyle = "#000";
context.stroke();
context.font = "bold 12px sans-serif";
context.fillText("x", 248, 43);
context.fillText("y", 58, 165);
context.textBaseline = "top";
context.fillText("( 0, 0 )", 8, 5);
context.textAlign = "right";
context.textBaseline = "bottom";
context.fillText("( 500, 375 )", 492, 370);
context.fillRect(0, 0, 3, 3);
context.fillRect(497, 372, 3, 3);
</script>
</html>
使用moveTo来定位画笔位置，使用lineTo进行画线，使用strokeStyle进行设置线段样式，调用stroke进行绘制
fillText进行书写文字，textBaseline类似于text-align设置基准
3. 颜色渐变
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css" media="all">
.pos {
text-align: center;
}
.canvas {
border: 1px solid #ccc;
}
</style>
<title>html5 canvas</title>
</head>
<body>
<div class="pos">
<canvas id="a1" class="canvas" width="300" height="200"></canvas>
</div>
</body>
<script type="text/javascript" charset="utf-8">
var a_canvas = document.getElementById("a1");
var context = a_canvas.getContext("2d");
var my_gradient = context.createLinearGradient(0, 0, 300, 200);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
context.fillStyle = my_gradient;
context.fillRect(0, 0, 300, 200);
</script>
</html>
4. 载入图片
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css" media="all">
.pos {
text-align: center;
}
.canvas {
border: 1px solid #ccc;
}
</style>
<title>html5 canvas</title>
</head>
<body>
<div class="pos">
<img id="img" src="index.jpg" alt="index" width="50" height="50">
<canvas id="a1" class="canvas" width="300" height="200"></canvas>
</div>
</body>
<script type="text/javascript" charset="utf-8">
var a_canvas = document.getElementById("a1");
var context = a_canvas.getContext("2d");
var img = document.getElementById("img");
setInterval(function () {
a_canvas.width = a_canvas.width;
var x = Math.floor((Math.random() * 240));
var y = Math.floor((Math.random() * 140));
context.drawImage(img, x, y, 60, 60);
}, 1000);
</script>
</html>
想要在canvas中加载图片，首先要在文档中已经加载完成的图片，然后找到它，通过drawImage来加载，添加了随机，还是挺有趣的，canvas是一个很棒的东西，希望可以逐步学习，能表达自己的想法，作出有趣实用的东西