canvas

作者：Jason199

2022 年 8 月 10 日
北京
本文字数：1736 字
阅读完需：约 6 分钟

canvas 和 canvas 技术

canvas: 一般指得是 Html5 标准里面得一个标签

在页面上出现一个画布

可以再上面进行绘图, 动画, ...

canvas 画布

一个闭合标签

默认得画布大小是 300 * 150 大小

如果调整画布大小, 不能使用 css 得 width 和 height 样式来调整

当使用 css 去调整画布大小得时候, 只是改变了可视得大小

真实得画布大小依旧是 300 * 150

向调整画布大小, 需要直接再标签上使用 width 和 height 属性来进行调整

书写值得时候, 不需要单位, 标签得兼容性不是很好。

IE9 以下不兼容

标签对内书写一段文本

会在不支持 canvas 标签得浏览器中显示文本

再支持 canvas 标签得浏览器中不显示文本内容

本质

就是出现一张图片

只不过一个画布是一个空白得图片

我们使用 js 再这个 "图片" 上添加内容而已

canvas 技术: 一般是指使用 JS 得 API 再 canvas 画布上进行图案得绘制

依靠 JS 来进行绘图

包括点线面文本图片 ..., 一切再画布上得内容都是依靠 JS 添加

<style>    canvas {      border: 1px solid #333;      /* width: 600px;      height: 300px */    }  </style>
<canvas width="600" height="300">    浏览器不支持 canvas 技术!  </canvas>
  <script>    /*      canvas    */  </script>

复制代码

canvas 初体验

canvas 上进行绘制

1. 获取 canvas 元素

const canvas = document.querySelector('canvas')

2. 要获取这个元素得 "工具箱"

工具箱里面有很多的直线工具, 矩形工具, 弧形工具, ...

依赖这些工具箱内的工具进行绘制

我们管这个工具箱叫做 canvas 上下文

const ctx = canvas.getContext('2d')

返回值: 一个 canvas 工具箱, 我们可以使用里面得工具进行绘制图形

3. 体验画一条直线

3-1. 把笔移动到你的线起点位置

ctx.moveTo(100, 100)

3-2. 以线得形式走到终点位置

ctx.lineTo(200, 100)

3-3. 路径填充

之前 3-1 和 3-2 只是描绘了一个线得路径

描边: 线就是描边

ctx.stroke()

会把你绘制好得路径描边出现颜色

默认都是黑色, 1px 宽度得线

填充: 面就是填充

4.线的颜色和宽度问题

改变 canvas 绘制线宽度

ctx.lineWidth = 数字

<style> * {      margin: 0;      padding: 0;    }  canvas {      border: 2px solid #333;      margin: 100px;    }  </style>  <body>  <canvas width="600" height="300">    您的浏览器不支持 canvas 画布, 请更换高版本浏览器后重试 ! ^_^  </canvas>
  <script>// 1. 获取 canvas 元素    const canvas = document.querySelector('canvas')// 2. 生成一个 canvas 工具箱    const ctx = canvas.getContext('2d')// 3. 体验画线    ctx.moveTo(100, 100)    ctx.lineTo(200, 100)// 描边之前改变一下线得宽度    ctx.lineWidth = 2    ctx.stroke()  </script></body>

复制代码

canvas 绘制平行线

把画线得步骤重复两次, 分别给一个合适得坐标

当你直接移动到第二个位置开始画线得时候

等到描边得时候, 实际上两个线还是有关联得

当你描第二条线得时候, 会再次描一次第一条线

只描最后一次, 前面得不进行描边绘制

canvas 绘制一个带有颜色得平行线

我要再描边之前设置一下描边得颜色

ctx.ctrokeStyle = '颜色'

  //1. 获取 canvas 元素
    const canvas = document.querySelector('canvas')
 //2. 生成一个 canvas 工具箱
    const ctx = canvas.getContext('2d')
// 给第一条线设置宽度和颜色
    ctx.lineWidth = 4
    ctx.strokeStyle = 'red'
    ctx.moveTo(100, 100)
    ctx.lineTo(200, 100)
    ctx.stroke()

复制代码

发布于: 刚刚阅读数: 2

原文链接:【http://xie.infoq.cn/article/03ffbf36c14a006a2d9bc1437】。

Jason199

关注

还未添加个人签名 2022.04.29 加入

一条努力上岸的咸鱼

发布

暂无评论

创作场景

canvas

canvas 和 canvas 技术

canvas 初体验

1. 获取 canvas 元素

2. 要获取这个元素得 "工具箱"

3. 体验画一条直线

4.线的颜色和宽度问题

canvas 绘制平行线

Jason199

评论