canvas的使用

最新推荐文章于 2025-04-18 18:16:25 发布

weixin_44740410

最新推荐文章于 2025-04-18 18:16:25 发布

阅读量99

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44740410/article/details/90048448

本文详细介绍了HTML5的Canvas元素如何使用JavaScript在网页上绘制图像。通过实例演示了如何控制画布的每一像素，包括绘制路径、矩形、圆形、字符及添加图像。讲解了画布的属性设置，如线宽、颜色、末端样式等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是Canvas？
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

canvas的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas width="600" height="600" id="cvs" style="border: 1px solid red"></canvas>
<script>
    var ctx=document.querySelector('#cvs').getContext('2d');

//    开启路径
    ctx.beginPath()
//    确定起点
    ctx.moveTo(100,100);
    ctx.lineTo(400,100);
    //闭合路径
    ctx.closePath();
//    设置线宽
    ctx.lineWidth=20;
    //线体颜色
    ctx.strokeStyle='red';
    //设置线的末端:lineCap:butt默认  round square
    ctx.lineCap='butt';
    ctx.stroke();


    ctx.beginPath()
    //    确定起点
    ctx.moveTo(100,300);
    ctx.lineTo(400,300);
    //闭合路径
    ctx.closePath();
    //    设置线宽
    ctx.lineWidth=30;
    //线体颜色
    ctx.strokeStyle='blue';
    ctx.stroke();


    ctx.beginPath()
    //    确定起点
    ctx.moveTo(100,500);
    ctx.lineTo(400,500);
    //闭合路径
    ctx.closePath();
    //    设置线宽
    ctx.lineWidth=40;
    //线体颜色
    ctx.strokeStyle='pink';
    ctx.stroke();
</script>
</body>
</html>

使用canvas绘图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="cvs" width="600" height="500" style="border: 1px solid red"></canvas>
<script>
    var ctx=document.querySelector('#cvs').getContext('2d');
    // ctx.beginPath();
    ctx.moveTo(100,100);
    ctx.lineTo(400,100);
    ctx.lineTo(400,400);
    ctx.lineTo(100,400);
    ctx.closePath();
    // ctx.fill();

    //小正方形
    // ctx.beginPath();
    ctx.moveTo(150,150);
    ctx.lineTo(150,350);
    ctx.lineTo(350,350);
    ctx.lineTo(350,150);
    ctx.closePath();
    ctx.fillStyle="pink";
    ctx.fill();

    /**
     * 非0环绕
     * 1.在区域中添加一条射线
     * 2.看这条射线和轨迹的交点,规定顺时针为+1,逆时针是-1,算出交点的和
     * 3.如果交点结果是0,表明在这个区域里面不填充颜色,交点结果部位0,在外边,填充颜色
     */


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