Canvas Drawing
Canvas Drawing （画布绘制）
The JavaScript should be used to draw on the canvas. We are going to do with step by step. （应使用JavaScript在画布上绘制。我们将逐步完成。）
1. Find the Canvas Element
- Find the Canvas Element （1.查找画布元素）
To find the canvas element use the HTML DOM method: getElementById():
var canvas=document.getElementById("canvas");
2. Create a drawing object
- Create a drawing object （2.创建图形对象）
Use the getContext() HTML object, with properties and methods:
var ctx = canvas.getContext("2d");
3. Draw on the Canvas Element
- Draw on the Canvas Element （3.在画布元素上绘制）
Now you can draw on the canvas. Use the fillStyle property can be a CSS color, a pattern, or a gradient. （现在，您可以在画布上绘制。使用fillStyle属性可以是CSS颜色、图案或渐变。）
ctx.fillStyle = "#1c87c9";
You can also use the fillRect (x, y, width, height) method that draws a rectangle that is filled with the fill style, on the canvas:
ctx.fillRect(0, 0, 230, 130);
Example of the HTML <canvas> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="canvas" width="250" height="150" style="border:1px solid #dddddd;">
The canvas tag is not supported by your browser.
（您的浏览器不支持画布标签。）
</canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#1c87c9";
ctx.fillRect(0, 0, 230, 130)
（ctx.fillRect (0, 0, 230, 130)）
</script>
</body>
</html>