551day(体验canvas绘图.html）

最新推荐文章于 2023-06-09 11:35:33 发布

原创最新推荐文章于 2023-06-09 11:35:33 发布 · 111 阅读

0 ·

CC 4.0 BY-SA版权

《2019年4月8日》【连续 551天】

标题：体验canvas绘图.html；
内容：


<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            border: 1px solid #ccc;
            /*不建议在 样式设置尺寸*/
            /*width: 600px;
            height: 400px;*/
        }
    </style>
</head>
<body>
<!--1.准备画布-->
<!--1.1 画布是白色的 而且默认300*150-->
<!--1.2 设置画布的大小  width="600" height="400" -->
<canvas width="600" height="400" ></canvas>
<!--2.准备绘制工具-->
<!--3.利用工具绘图-->
<script>
    /*1.获取元素*/
    var myCanvas = document.querySelector('canvas');
    /*2.获取上下文 绘制工具箱 */
    /*是否有3d 暂时没有*/
    var ctx = myCanvas.getContext('2d'); /*web gl 绘制3d效果的网页技术*/
    /*3.移动画笔*/
    ctx.moveTo(100,100);
    /*4.绘制直线 (轨迹，绘制路径)*/
    ctx.lineTo(200,100);
    /*5.描边*/
    ctx.stroke();
</script>
</body>