H5 canvas学习笔记 | 基本使用路径状态

H5canvas2D图形绘制详解

最新推荐文章于 2024-03-04 10:03:05 发布

原创

最新推荐文章于 2024-03-04 10:03:05 发布 · 313 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#笔记 #html5 #canvas

本文介绍了H5canvas的基础知识，包括Canvas画布和画笔的使用，路径的创建，状态管理，如strokeStyle、fillStyle等属性，以及如何绘制直线、矩形、圆弧、椭圆和贝塞尔曲线。同时讲解了线条样式、渐变、阴影效果和图像处理，如drawImage方法。文章还涵盖了文本绘制和阴影效果，以及如何使用getImageData和putImageData进行像素操作。

H5 canvas学习笔记

简介

HTML有两个主要的2D图形技术:Canvas和SVG

canvas	svg
2D	2D
基于JavaScript动态生成	使用XML静态描述
不会保留绘制的图形的信息，基于像素点绘制位图，放大会会失真	内存中保留绘制的图形的信息，用html标签描绘形状，矢量图放大不会失真
canvas无法对已经绘制的图像进行修改、操作如果发生修改，需要重绘	svg中每个图形又对应真实的dom节点、svg可以获取到标签进行操作

H5 Canvas就是使用JavaScript来操作Canvas元素(画布)的技术。
①获取Canvas对象(画布)
②获取渲染上下文环境对象context(画笔)
③开始绘制图形

所有canvas图形操作的属性和方法都是基于context对象

Canvas画布/画笔

坐标系是二维x/y轴，像素为最小单元（栅格），每个像素具有RGBA数据，像素数量等于画布长*宽
在这里插入图片描述

canvas画布的大小
- 可以是行间样式
- 可以通过canvas.width/canvas.height设置和获取画布的大小
canvas画笔
- 2d画笔canvas.getContext('2d')
- 3d画笔canvas.getContext('webgl')或者canvas.getContext('webgl2')

<body>
    <canvas id="canvas">不支持时的提示文字</canvas>
</body>
<script>
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");  
</script>

1.Canvas标签中的文字是在不支持Canvas标签的浏览器中使用的，因为支持Canvas标签的浏览器会忽略容器中包含的内容正常渲染Canvas标签，而不支持Canvas标签的浏览器则相反，浏览器会忽略容器而显示其中的内容。
2.Canvas标签的默认大小为：300 x 150 (像素)

Canvas路径

在Canvas中，除了矩形，其他所有的Canvas基本图形(适用范围)都是以路径为基础。

方法	说明
beginPath()	开始一条新路径
closePath()	封闭当前路径
isPointInPath(x,y)	判断某一个点(x,y)是否存在当前路径内

beginPath():新建一条路径，判断是否同一路径的标准是是否使用了beginPath方法。
closePath():闭合路径，连接起点与终点，封闭当前路径:closePath是指将同一路径的起点和终点连接起来，使其成为一个封闭图形。
isPointInPath(x,y) ：不支持Canvas自带的两个方法strokeRect()和fillRect()，只能用rect()

Canvas状态

Canvas基于"状态"来绘制图形，每一次绘制(stroke或者fill)，Canvas会检测整个程序定义的所有状态(strokeStyle、fillStyle、lineWidth等)。
①如果开启了一个新路径，则不同路径使用不同的值
②如果没有开启新路径，后面的值会覆盖前面的值

绘图样式必须先于矩形绘制方法之前，把相应参数设置好，canvas再根据已设置的参数来画图。

状态属性

状态包括:填充效果、描边效果、线条效果、文本效果、阴影效果和全局属性

填充效果:fillStyle
描边效果:strokeStyle
线条效果:lineCap、lineJoin、lineWidth、miterLimit
文本效果:font、textAlign、textBaseLine
阴影效果:shawBlu、shadowColor、shadowOffsetX、shadowOffsetY
全局属性:globalAlpha、globalCompositeOperation

globalAlpha属性定义Canvas环境的透明度，默认为1.0，取值范围为0.0~1.0
globalCompositeOperation属性改变图形交叉显示的顺序

属性值	说明	符号表示
source-over	默认值，新图覆盖旧图	新图B，旧图A
destination-over	旧图A覆盖新图B
copy	只显示新图，旧图透明
darker	两种图形都显示，在重叠部分颜色由两种图形的颜色值相减后形成
light	两种图形都显示，在重叠部分颜色由两种图形的颜色值相加后形成
destination-atop	只显示新图与旧图的重叠部分以及新图的其余部分	A∩BUB
source-atop	只显示新图与旧图的重叠部分以及旧图的其余部分	A∩BUA
destination-in	只显示旧图中与新图的重叠部分
source-in	只显示新图中与旧图重叠的部分
destination-out	只显示旧图中与新图不重叠的部分
source-out	只显示新图中与旧图不重叠的部分
xor	两图都绘制，重叠部分透明

在这里插入图片描述

状态的保存和恢复

保存当前状态sava()
恢复之前的保存状态restore()

Canvas的状态是存储在栈中的，每次调用save()方法后，当前的状态都会被推送到栈中保存起来。调用restore()方法，栈顶的状态被pop出来。

 const ctx = canvas.getContext('2d');
 ctx.fillStyle = "#cccccc";
 ctx.fillRect(10, 10, 300, 100);
 ctx.save(); // 保存状态
 ctx.fillStyle = "#ee7034";
 ctx.fillRect(10, 150, 300, 100);
 ctx.restore(); // 还原到上次保存的状态
 ctx.fillRect(10, 300, 300, 100);

基本图形stroke/fill

strokeStyle属性：设置边框样式
stroke()：通过线条来绘制图形轮廓，执行描边动作
fillStyle属性：设置填充的颜色
fill()：通过填充路径的内容区域生成实心的图形。如果路径未关闭， fill() 方法会从路径结束点到开始点之间添加一条线，以关闭该路径，然后填充该路径。

直线moveTo()/lineTo()

context对象的moveTo(x1,y1)：将画笔移动到(x1,y1)位置，表示直线的起点.。
context对象的lineTo(x2,y2)：使用画笔从起点(x1,y1)开始画直线，一直画到终点(x2,y2)。

<body>
    <canvas id="canvas"></canvas>
</body>
<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    ctx.moveTo(100,100); //
    ctx.lineTo(100,200); //