Canvas画布(笔记)新手必看懂

刚子最爱编程

已于 2022-10-28 16:09:58 修改

阅读量1.1k

点赞数 3

文章标签：前端 javascript html

于 2022-10-28 11:47:25 首次发布

本文链接：https://blog.csdn.net/qq_64703421/article/details/127567090

版权

1. 载入图片 [drawimage() 方法 ]

2.绘制文字

3.实现刮刮乐效果

4. 实现画画功能

第一部分

1.什么是Canvas？

HTML5中提供了<canvas>标签，使用<canvas>标签在网页中创建一个矩形区域的画布。

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，你可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

2. 创建画布【Canvas元素】

向 HTML5 页面添加 canvas 元素

规定元素的 id、宽度和高度

注意：你在画布标签有文字一般不会显示出来，如果显示就是浏览器不支持

  <style>
    canvas { border: 1px solid #ccc;}
  </style>

<body>
  <!-- 创建画布 -->
  <canvas id="myCanvas" width="720" height="405">
      你的浏览器不支持HTMML5 canvas,请升级！
  </canvas>
</body>

可以看出，它是一个矩形的画布

3. JS 获取画布 id

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript内部完成。

JavaScript 通过 id 来寻找 canvas 元素

  <script>
    // js 在画布中作画
    let c = document.querySelector('#myCanvas')
    let cxt = c.getContext('2d')  //画笔对象
  </script>

4. 准备画笔 [Context]

准备好画布，还需要一支画笔。 getContext('2d')就相当于画笔：getContext('2d')对象内建的HTML5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法；

5. Context对象.属性

moveTo(x1,y1): 确定绘制的起点坐标

lineTo(x2,y2):由上一点开始绘制线段

strokeStyle = "#F00" : 描边颜色F00

lineWidth = 5 : 描边粗细线的宽度

stroke() : 描边方法

beginPath() : 开启路径

closePath() : 结束路径，会形成一个闭合的线

fillStyle="#00" 填充颜色

fill() : 填充方法

strokeRect(x,y,w,h)、rect(x,y,w,h): 直接画空心矩形

fillRect(x,y,w,h) : 实心矩形

clearRect(x,y,w,h) : 清除画布方法

实现代码

<script>

最低0.47元/天解锁文章

刚子最爱编程

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
Canvas画布(笔记)新手必看懂

HTML5中提供了标签，使用标签在网页中创建一个矩形区域的画布。HTML5 的canvas元素使用在网页上绘制图像。画布是一个矩形区域，你可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
复制链接

扫一扫