HTML5CANVAS画布教程

最新推荐文章于 2024-09-11 21:35:21 发布

夏华东的博客

最新推荐文章于 2024-09-11 21:35:21 发布

阅读量274

点赞数

本文链接：https://blog.csdn.net/weixin_44493841/article/details/109648262

版权

这是一份详细的HTML5CANVAS画布教程，包括视频教程和代码示例，帮助学习者掌握在网页中使用CANVAS进行图形绘制的技术。

摘要由CSDN通过智能技术生成

HTML5CANVAS画布教程

视频：

https://www.bilibili.com/video/BV1Y4411N7e5?from=search&seid=15324256859970295375
https://www.bilibili.com/video/BV19E411G7Vj?from=search&seid=13003172792544246717

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas坐标、大小、绘制矩形</title>
    <style>
        /*如果使用css来控制canvas宽高的会导致图像拉伸*/
        /*#mycanvas{width: 300px;height: 900px}*/
    </style>
</head>
<body>
<canvas id="mycanvas" width="300" height="900"></canvas>
<script>
    var mycanvas = document.getElementById("mycanvas");//获取mycanvas节点
    var ctx = mycanvas.getContext("2d"); //获取2d上下文
    ctx.fillRect( //填充矩形
        50, //水平坐标
        50, //垂直坐标
        50, //宽
        50  //高
    )
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路径、填充、描边</title>
    <script src="jquery-3.1.0.js"></script> <!--引入jquery-->