用JavaScript绘制画布
HTML画布上的所有绘图必须使用JavaScript完成：
例
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
完整代码：
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>
分析：
步骤1：查找画布元素
首先，您必须找到<canvas>元素。
这通过使用HTML DOM方法getElementById（）完成：
var canvas = document.getElementById（“myCanvas”）;
步骤2：创建绘图对象
其次，您需要画布的绘图对象。
getContext（）是一个内置的HTML对象，具有用于绘制的属性和方法：
var ctx = canvas.getContext（“2d”）;
步骤3：画在画布上
最后，您可以在画布上绘制。
将绘图对象的填充样式设置为红色：
ctx.fillStyle =“＃FF0000”;
fillStyle属性可以是CSS颜色，渐变或模式。 默认的fillStyle是黑色的。
fillRect（x，y，width，height）方法在画布上绘制一个填充填充样式的矩形：
ctx.fillRect（0,0,150,75）;
|
