Canvas—从零开始手把手教会

Canvas绘图教程：从零开始的手把手教学

最新推荐文章于 2025-02-12 14:15:32 发布

原创

最新推荐文章于 2025-02-12 14:15:32 发布 · 802 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

本文详细介绍了如何使用HTML5 Canvas进行绘图，从创建画布、使用画笔、绘制线段和矩形，到设置颜色和线条粗细，再到封装绘制方法和使用rect()绘制矩形，逐步深入，帮助读者掌握Canvas基础绘图技能。

文章目录

开始前的准备
学习如何使用画笔
开始绘画线段
绘画多条线段
矩形的绘画
给矩形上色
封装绘制方法
使用rect()方法绘制矩形
总结

开始前的准备

在Html上添加一个画布,给上宽高

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas——从线段开始学会</title> 
</head>

<body>
    <canvas id="canvas" style="border: 1px solid #aaaaaa; margin: 50px auto;" width="800" height="600">
    你的浏览器居然不支持Canvas.
    </canvas>
</body> 

</html>

运行结果：
在这里插入图片描述

学习如何使用画笔

1.移动画笔 moveTo(x, y）
这句代码的意思是 移动画笔至(x, y)这个点（单位是px） 。记住，这里是以 canvas 画布的左上角为笛卡尔坐标系的原点，且y轴的正方向向下，x轴的正方向向右。

2.笔画停点 lineTo(x, y)
这句的意思是从 上一笔的停止点绘制到(x,y)这里。不过要清楚，这里的moveTo()，lineTo()都只是状态而已，是我准备要画，还没有开始画，就像是大脑已经想象出来要怎么做了，但是手还没有行动。

3.选择画笔
设置一下画笔的颜色和粗细。

context.lineWidth = 5，这句话的意思是设置画笔(线条)的粗细为 5 px。

context.strokeStyle = “pink”，这句话的意思是设置画笔(线条)的颜色为玫红色。

4.确定绘制
确定绘制只有两种方法，fill()和stroke()，前者是指填充，后者是指描边。因为我们只是绘制线条，所以只要描边就可以了。调用代码 context.stroke() 即可。

开始绘画线段

准备工作完毕了，现在我们开始来绘画第一条线段吧

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Canvas——从线段开始学会</title>
</head>
<body>
  <canvas id="canvas" style="border: 1px solid #aaaaaa; margin: 50px auto;" width="800" height="600">
    你的浏览器居然不支持Canvas.
  </canvas>
  <script>
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 600;
        var context = canvas.getContext("2d");
        context.moveTo(100,100);
        context.lineTo(700,500);
        context.lineWidth = 5;
        context.strokeStyle = "pink";
        context.stroke();
    }
  </script>
</body>
</html>

演示图：

最低0.47元/天解锁文章