canvas属性方法记录

最新推荐文章于 2024-03-02 13:59:14 发布

Program W

最新推荐文章于 2024-03-02 13:59:14 发布

阅读量613

点赞数 1

分类专栏：大前端 html 文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/weixin_46037781/article/details/125639343

版权

大前端同时被 2 个专栏收录

89 篇文章 1 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

一、Canvas 是什么？

Canvas 中文名叫 “画布”，是 HTML5 新增的一个标签。
Canvas 允许开发者通过 JS在这个标签上绘制各种图案。
Canvas 拥有多种绘制路径、矩形、圆形、字符以及图片的方法。
Canvas 在某些情况下可以 “代替” 图片。
Canvas 可用于动画、游戏、数据可视化、图片编辑器、实时视频处理等领域。

二、第一个图（直线）

<body>
  <canvas
    id="c"
    width="300"
    height="200"
    style="border: 1px solid #ccc;"
  ></canvas>

  <script>
    // 1、获取canvas对象
    const cnv = document.getElementById('c')

    // 2、获取canvas上下文环境对象
    const cxt = cnv.getContext('2d')

    // 3、绘制图形
    cxt.moveTo(100, 100) // 起点
    cxt.lineTo(200, 100) // 终点
    cxt.stroke() // 将起点和终点连接起来
  </script>
</body>

三、基本图形属性、方法

属性

lineWidth：线的粗细
strokeStyle：线的颜色
lineJoin：线条连接（拐角）的样式
lineCap：直线两端（线帽）样式
strokeStyle：设置描边的属性（颜色、渐变、图案）【必须在strokeRect() 前面，不然样式不生效。】
fillStyle：设置填充的属性（颜色、渐变、图案）【必须在fillRect() 前面，不然样式不生效。】

方法

moveTo(x, y)，取一个点
lineTo(x, y)，由点出发一条直线
stroke()，将起点和终点连接起来（描边）
closePath()，手动闭合拐点（在直线宽度较大时无法很好的闭合最终拐角）
beginPath()，重新开启一个路径（第一条线的样式会影响之后的线，所以必须设置新线段的样式）
clip()：从原始画布剪切任意形状和尺寸的区域。（该方法后的图形设计在截取内部）
isPointInPath(x,y)：指定的点是否位于当前路径中，则返回 true，否则返回 false。
strokeRect(x, y, width, height)：描边矩形（x和y是矩形左上角起点；width 和 height 是矩形的宽高）
fillRect()，填充矩形
clearRect(x, y, width, height)：清空矩形
clearRect(0, 0, cnv.width, cnv.height)：清空画布（要清空的区域）
arc(x, y, r, sAngle, eAngle，counterclockwise)：创建弧/曲线（用于创建圆形或部分圆）。【x 和 y: 圆心坐标】【r: 半径】【sAngle: 开始角度】【eAngle: 结束角度】【counterclockwise: 绘制方向（true: 逆时针; false: 顺时针），默认 false】，从正向x轴开始
arcTo(cx, cy, x2, y2, radius)：创建两切线之间的弧/曲线。【cx: 两切线交点的横坐标，cy: 两切线交点的纵坐标，x2: 结束点的横坐标，y2: 结束点的纵坐标，radius: 半径】，先定义起始点
setLineDash([])：将描边设置成虚线。

四、文本属性、方法

属性

font：和 CSS 设置font差不多
strokeStyle：设置文本描边颜色
fillStyle：设置文本填充颜色
textAlign：设置文字的水平对齐方式
textBaseline：设置文字的垂直对齐方式（根据css 的文本字母基线）

方法

strokeText(text, x, y, maxWidth)：文本描边，maxWidth可选
fillText(text, x, y, maxWidth)：填充文本，maxWidth可选
measureText(text).width：获取文本长度

五、转换

scale(scalewidth,scaleheight)：宽高缩放比
rotate(angle)：旋转图形多少角度
translate(x,y)：复制一份图形映射到画布上某位置上
transform(a,b,c,d,e,f)：类似translate()，但并不是复制，会有一些移动属性

六、图片

drawImage(image, dx, dy)：向画布上绘制图像、画布或视频。
drawImage(image, dx, dy, dw, dh)：指定图片宽高
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)：截图图片

参考：
加深细节理解：Canvas 从入门到劝朋友放弃（图解版）
方法参数查询：HTML5 <canvas> 参考手册

Program W

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
canvas属性方法记录

三、基本图形属性、方法属性：线的粗细：线的颜色：线条连接（拐角）的样式：直线两端（线帽）样式：设置描边的属性（颜色、渐变、图案）【必须在前面，不然样式不生效。】：设置填充的属性（颜色、渐变、图案）【必须在前面，不然样式不生效。】方法，取一个点，由点出发一条直线，将起点和终点连接起来（描边），手动闭合拐点（在直线宽度较大时无法很好的闭合最终拐角），重新开启一个路径（第一条线的样式会影响之后的线，所以必须设置新线段的样式）：从原始画布剪切任意形状和尺寸的区域。（该方法后的图形设
复制链接

扫一扫