<canvas>You can create a canvas element in an HTML document. With a brush to paint the canvas needs. An object can be obtained through the getContext the canvas () method, the object function is equivalent to a brush. You will pass a parameter when calling getContext () method '2d', '2d' refers to the two-dimensional picture drawn on the canvas. In addition there are based on 3d rendering of WebGl.
We did not talk much to create a canvas and brush it! And use them to draw
implemented steps of:
1. Add the canvas element in html document
<html>
<body>
<!-添加画布元素，id为canvas，并设置宽度和高度-!>
<canvas id="canvas" width=250 height=250> </canvas>
//JavaScript脚本标签
<script></script>
</body>
</html>2. Get the canvas element in JavaScript scripts
<script>
//通过id来获取画布元素
var canvas=document.getElementById("canvas");
</script>3. Use the brush canvas element to obtain an object
<script>
...
//生成画笔对象（画布内容对象）
var ctx=canvas.getContext("2d");
</script>4. Draw a rectangle
<script>
...
//设置颜色
ctx.fillStyle="yellow";
//在坐标（0,0）的位置填充一个长为100，宽为100的矩形
ctx.fillRect(0,0,100,100);
</script>My github There is a fun game!
https://chunsenye.github.io/page/game1.html
After a long fourth off
