Canvas初探入门— 基础图形的绘制

最新推荐文章于 2024-04-20 16:29:18 发布

Beiyux

最新推荐文章于 2024-04-20 16:29:18 发布

阅读量631

点赞数 3

分类专栏： Canvas 文章标签： javascript 前端 html5 canvas

本文链接：https://blog.csdn.net/weixin_45745641/article/details/122166708

版权

Canvas 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

前言
绘制基础图形
最后

前言

Canvas是HTML5的一个新特性，canvas又叫做画板。顾名思义，我们可以在canvas上绘制我们需要的图形。之前了解过python的turtle库，感觉有些类似，下面一起来看看如何绘制简单的canvas图形

绘制基础图形

定义canvas标签

在html中定义一个canvas标签

<canvas id="canvas" width="800" height="600"></canvas>

也就是定义一个画布，确定它的宽度和高度

JS中进行绘制

下面进行绘制，注意看注释哦

//获得画布元素
var canvas=document.getElementById("canvas");
//获得2维绘图对象
var ctx=canvas.getContext("2d");
//设置线宽
ctx.lineWidth = 3;
//颜色  
ctx.strokeStyle = 'red'; //线条
ctx.fillStyle = 'blue';  //填充色
ctx.moveTo(10,10); //起点
ctx.lineTo(100,10); //下一点
ctx.lineTo(100,100); //下一点
ctx.lineTo(10,10); //下一点
ctx.stroke();  //fill()执行填充色  stroke()执行线条
ctx.fill();

然后运行到浏览器就出现了效果

在这里插入图片描述

绘制新图形

如果我们画完了这个图像，想再旁边再画一个，那么就要用到 ctx.beginPath();

//重新绘制
ctx.beginPath();
ctx.moveTo(300,10);//移动到新的坐标开始绘制
ctx.lineTo(300,50);
ctx.lineTo(400,50);
ctx.closePath();//闭合
ctx.stroke();

在这里插入图片描述
下面附上完整代码，可以自行动手试一试，画出其它的图形

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <canvas id="canvas" width="800" height="600"></canvas>
        <script>
           //获得画布元素
            var canvas=document.getElementById("canvas");
            //获得2维绘图对象
            var ctx=canvas.getContext("2d");
            //设置线宽
            ctx.lineWidth = 3;
            //颜色  
            ctx.strokeStyle = 'red'; //线条
            ctx.fillStyle = 'blue';  //填充色
            ctx.moveTo(10,10); //起点
            ctx.lineTo(100,10); //下一点
            ctx.lineTo(100,100); //下一点
            ctx.lineTo(10,10); //下一点
            ctx.stroke();  //fill()执行填充色  stroke()执行线条
            ctx.fill();

            //重新绘制
            ctx.beginPath();
            ctx.moveTo(300,10);
            ctx.lineTo(300,50);
            ctx.lineTo(400,50);
            ctx.closePath();//闭合
            ctx.stroke(); 
        </script>
    </body>
</html>