H5学习之5 canvas的运用

最新推荐文章于 2022-05-30 19:34:35 发布

GOGOGOAAAA

最新推荐文章于 2022-05-30 19:34:35 发布

阅读量308

点赞数

分类专栏： h5 文章标签： html5 canvas

本文链接：https://blog.csdn.net/qq_29469941/article/details/52016921

版权

h5 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html >

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;" >
<!--创建画布canvas,并且设置其id,宽度，高度，样式
    具体画东西的过程放在script标签里
-->
</canvas>

<script type="text/javascript">

    var c=document.getElementById("myCanvas"); /*获取画布myCanvas，c也就变成了myCanvas*/
    var cxt= c.getContext("2d"); /*创建画布上的画笔cxt。通过cxt= c.getContext("2d")创建了在c上的画笔，也就是在myCanvas上的画笔*/
    cxt.moveTo(10,10);/*将画笔点移动到10，10*/
    cxt.lineTo(150,50);/*从10，10画一条线到150,50,此时画笔坐标也就移动到了150，50*/
    cxt.lineTo(10,50);
    cxt.stroke();/*结束路径，必须有的*/

</script>
</body>
</html>

具体效果如下

思路解释：

在body里创建canvas标签，就是画布。

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;" >
<!--创建画布canvas,并且设置其id,宽度，高度，样式
    具体画东西的过程放在script标签里
-->
</canvas>

然后在script里书写画画函数，首先获取创建的canvas 的id myCanvas，也就是获取了canvas。

 var c=document.getElementById("myCanvas"); /*获取画布myCanvas，c也就变成了myCanvas*/

接着创建一个跟 myCanvas绑定的画笔，通过画笔函数来画出图像。

 var cxt= c.getContext("2d"); /*创建画布上的画笔cxt。通过cxt= c.getContext("2d")创建了在c上的画笔，也就是在myCanvas上的画笔*/
    cxt.moveTo(10,10);/*将画笔点移动到10，10*/
    cxt.lineTo(150,50);/*从10，10画一条线到150,50,此时画笔坐标也就移动到了150，50*/
    cxt.lineTo(10,50);
    cxt.stroke();/*结束路径，必须有的*/

GOGOGOAAAA

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5学习之5 canvas的运用

html>id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;" >创建画布canvas,并且设置其id,宽度，高度，样式具体画东西的过程放在script标签里-->type="text/javascript"> var c=document.getElementByI
复制链接

扫一扫

专栏目录