<canvas>元素可以在HTML文档中创建一个画布。有了画布还需要画笔才能画画。可以通过canvas的getContext（）方法来获取到一个对象，这个对象的功能就相当于一个画笔。在调用getContext（）方法时会传递一个参数‘2d’,‘2d’指的是在画布上绘制二维图片。除此之外还有基于WebGl的3d绘制。
话不多说我们就来创建一个画布和画笔吧！并用它们画画
实现步骤：
1.在html文档中添加canvas元素
<html>
<body>
<!-添加画布元素，id为canvas，并设置宽度和高度-!>
<canvas id="canvas" width=250 height=250> </canvas>
//JavaScript脚本标签
<script></script>
</body>
</html>2.在JavaScript脚本中获取画布元素
<script>
//通过id来获取画布元素
var canvas=document.getElementById("canvas");
</script>3.使用画布元素获取画笔对象
<script>
...
//生成画笔对象（画布内容对象）
var ctx=canvas.getContext("2d");
</script>4.画一个矩形
<script>
...
//设置颜色
ctx.fillStyle="yellow";
//在坐标（0,0）的位置填充一个长为100，宽为100的矩形
ctx.fillRect(0,0,100,100);
</script>我的github里面有一个有趣的游戏！
https://chunsenye.github.io/page/game1.html
第四关过了好久
扫一扫
2041
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
