Canvas画图

最新推荐文章于 2024-12-14 18:38:15 发布

萌芽子

最新推荐文章于 2024-12-14 18:38:15 发布

阅读量253

点赞数

CC 4.0 BY-SA版权

分类专栏：萌芽笔记文章标签： canvas 画图 JavaScript

本文链接：https://blog.youkuaiyun.com/Meng_ya_zi/article/details/89317509

萌芽笔记专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍如何使用HTML5 Canvas API绘制一个五角星图案，包括创建画布、设置绘图上下文、绘制线条和填充颜色等步骤。

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

萌芽之前一直都觉得Canvas是个神奇的东西所以今天学习一下！来来一起玩儿点好玩的，用Canvas画一个~~贼鸡儿丑的~~ 五角星！长期更新！！！

canvas画布

首先让我们创建一个canvas画布

<canvas id="myCanvas" height="500px" width="500px" style="border:1px solid #d3d3d3;">您的浏览器不支持</canvas>

如果浏览器不支持canvas标签则会显示标签内部的内容！接下来是我们的JavaScript代码部分：

var a = document.getElementById('myCanvas');   
 //找到刚刚的定义的画布
 
var add = a.getContext('2d'); 
//开启2d绘图模式，当然既然有2D肯定有3D啦不过一步一个脚印先从2D开始

接下来就是我们的主题内容啦！开始画线！第一个代表X第二个值代表Y，通俗点来讲X就是横着的Y就是竖着的。

 add.moveTo(100,110);
 //从什么地方开始
 
add.lineTo(150,100);
//划线

X=100就代表横着移动100px，Y=50说明竖着移动50px，如果都是0的话就代表在右上角的初始点。

  add.closePath();
  //创建从当前点回到起始点的路径。（如果有两条线在不一样的x，y轴的话最后加上这条会自动帮你连接上最开始的点）
  
    add.fillStyle = 'yellow';
    //填充颜色（填充物内部的颜色）
    
    add.strokeStyle = 'red';
    //外边框颜色（边距线的颜色）
    
    add.fill();
    //填充当前绘图
    
    add.stroke();
    //结束

当当当当！一个简单的形状就这样画出来啦！
一闪一闪亮晶晶
真是个好看~~丑哭了~~ 的五角星www之后会继续更新弧线等等其他形状的哟！贴一下源码不了解的小伙伴可以看看哦！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
</head>
<body>
<canvas id="myCanvas" height="500px" width="500px" style="border:1px solid #d3d3d3;">您的浏览器不支持</canvas>
</body>
<script>
    var a = document.getElementById('myCanvas');
    var add = a.getContext('2d');
    add.moveTo(100,110);//从什么地方开始
    add.lineTo(150,100);//划线
    add.lineTo(180,50);
    add.lineTo(210,100);
    add.lineTo(260,110);
    add.lineTo(230,160);
    add.lineTo(240,210);
    add.lineTo(190,180);
    add.lineTo(140,210);
    add.lineTo(140,160);
    add.closePath();//创建从当前点回到起始点的路径。
    add.fillStyle = 'yellow';//填充颜色
    add.strokeStyle = 'red';//外边框颜色
    add.fill();//填充当前绘图（路径）。
    add.stroke();
</script>
</html>