趣味编程-JavaScript-使用画布画画canvas

最新推荐文章于 2024-04-19 12:19:07 发布

dreamer_sen

最新推荐文章于 2024-04-19 12:19:07 发布

阅读量1.4k

点赞数

分类专栏： javascript 文章标签： canvas html 编程趣味编程 javascript

本文链接：https://blog.csdn.net/dreamer_sen/article/details/76917904

版权

javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<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

第四关过了好久
By叶春森

dreamer_sen

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
趣味编程-JavaScript-使用画布画画canvas

<canvas>元素可以在HTML文档中创建一个画布。有了画布还需要画笔才能画画。可以通过canvas的getContext（）方法来获取到一个对象，这个对象的功能就相当于一个画笔。在调用getContext（）方法时会传递一个参数‘2d’,‘2d’指的是在画布上绘制二维图片。除此之外还有基于WebGl的3d绘制。话不多说我们就来创建一个画布和画笔吧！并用它们画画实现步骤：1.在html文档
复制链接

扫一扫