Canvas—从零开始手把手教会_canvas教学

作者：羊村懒王 | 2024-05-15 10:10:17

踩

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
2
3
4
5
6
7
8
9
10
11
12
13
14

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

学习如何使用画笔

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">
    你的浏览器居然1
2
3
4
5
6
7
8

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/572342