canvas学习笔记

最新推荐文章于 2024-06-14 10:27:35 发布
最新推荐文章于 2024-06-14 10:27:35 发布
阅读量217 收藏
点赞数
文章标签： canvas html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36963245/article/details/113358220
版权
本文深入介绍了HTML5 Canvas的基本使用，包括如何创建和设置画布尺寸，以及通过JavaScript进行图形绘制。内容涵盖填充和描边矩形、路径绘制、圆弧绘制、透明度设置、线型和文本控制、渐变与阴影效果，以及图片绘制。此外，还探讨了使用面向对象思维来管理和更新Canvas上的图形，以及如何实现动画。
摘要由CSDN通过智能技术生成

canvas简介

以前，web上的动画都是由flash制作的，例如动画广告、游戏等。但是flash由许多缺点：要安装flash插件，漏洞多，卡顿、不流畅等…
h5提出的canvas标签，使得制作动画等变得轻量级

canvas基本使用

在页面中使用canvas，只需要在页面上添加一个canvas标签即可<canvas></canvas>。
canvas标签有两个属性：width和height，注意canvas的宽和高不要用css控制，负责会造成图片失真。

使用js绘制canvas步骤

  1. 获取画布，即获取到canvas的DOM元素getElementById()等
  2. 得到画布的上下文，有两个：2d和3d。所有的图像绘制都是通过上下文的方法或者属性进行设置的getContext('2d')
  3. 绘制图形（所有颜色先设置，后绘制）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="myCanvas" width="300" height="400"></canvas>
    <script>
        // 1.获取画布元素
        let myCanvas = document.getElementById('myCanvas');
        // 2.获取上下文
        let ctx = myCanvas.getContext('2d')
        // 3.绘制图形--先设置颜色，后绘制元素
        ctx.fillStyle = 'orange'
        ctx.fillRect(10, 10, 100, 100)
    </script>
</body>
</html>

在这里插入图片描述

canvas的像素化

canvas一旦绘制图形成功，就会被像素化，也就是说canvas没有能力葱画布上再次得到这个图形，没有办法再去修改已经在画布上的内容。
如果想要这个canvas上的图形移动，就必须按照清屏-更新-渲染的逻辑进行编程，也就是重新画一次。这也是canvas的动画思想。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="myCanvas" width="300" height="400"></canvas>
    <script>
        const myCanvas = document.getElementById('myCanvas');
        const ctx = myCanvas.getContext('2d')
        let left = 0;
        ctx.fillStyle = 'orange'
        // 要重新绘制新图形  -- 擦除--更新--渲染
        setInterval(() => {
            // 擦除现有图形
            ctx.clearRect(0,0,300,400)
            // 重新绘制
            ctx.fillRect(left++, 10, 40, 40)
        }, 10)
    </script>
</body>
</html>

面向对象思维实现canvas

因为canvas不能得到已经绘制的对象，所以我们要维持对象的状态，此时我们使用面向对象的方式来维持canvas需要的属性和状态。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // 创建一个矩形对象
        class Rect {
            constructor(x, y, width, height, color) {
                this.x = x;
                this.y = y;
                this.width = width;
                this.height = height;
                this.color = color;
            }

            update() {
                ++this.x
            }

            render() {
                ctx.fillStyle = this.color;
                ctx.fillRect(this.x, this.y, this.width, this.height);
            }
        }

        let rect1 = new Rect(0,20,20,10,'blue');
        let rect2 = new Rect(0,100,30,30,'green')
        setInterval(() => {
            ctx.clearRect(0,0,500,500);
            rect1.update();
            rect1.render();
            rect2.update();
            rect2.render();
        }, 10)
    </script>
</body>
</html>

canvas的绘制功能

mdn文档链接

绘制矩形

绘制填充一个矩形fillRect(x,y,width,height)

ctx.fillStyle='bule'
ctx.fillRect(0,0,200,50)

绘制一个矩形边框strokeRect(x,y,width,height)

ctx.strokeStyle='green'
ctx.strokeRect(0,70,200,50)

清除画布clearRect(x,y,width,height)

ctx.clearRect(0,0,600,600)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onClick="drawFillRect()">填充矩形</button>
    <button onClick="drawStokeRect()">矩形边框</button>
    <button onClick="clearRect()">擦除</button>

    <canvas id="myCanvas" width="200" height="200"></canvas>

    <script>
        const canvas = document.getElementById('myCanvas')
        const ctx = canvas.getContext('2d');
        
        // 绘制填充矩形
        function drawFillRect() {
            ctx.clearRect(0,0, 200, 200)
            ctx.fillStyle = 'green'
            ctx.fillRect(50, 50, 60, 70);
        }
        // 绘制矩形边框
        function drawStokeRect() {
            ctx.clearRect(0,0, 200, 200)
            ctx.strokeStyle = 'red';
            ctx.strokeRect(50, 50, 70, 70);
        }
        // 清除
        function clearRect() {
            ctx.clearRect(0, 0, 200, 200)
        }
    </script>
</body>
</html>

绘制路径

绘制路径的作用是为了设置一个不规则的多边形状态路径都是闭合的

绘制路径的步骤

  1. 开始路径并设置路径的起点beginPath()，也可通过moveTo(x,y)移动开始点到某位置
  2. 绘制路径（多次）lineTo(x,y)
  3. 闭合路径closePath()
  4. 填充或者绘制已经封闭路径的形状stroke()、fill()
    在绘制路径时如果不封闭路径，会自动封闭（只针对fill）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="200"></canvas>

    <script>
        const canvas = document.getElementById('myCanvas')
        const ctx = canvas.getContext('2d');
        
        ctx.fillStyle = 'orange'
        ctx.strokeStyle = 'blue'
        // 1. 开始路径
        ctx.beginPath();
        // 2.绘制开始点
        ctx.moveTo(10, 20);
        // 3.绘制路径
        ctx.lineTo(20,100);
        ctx.lineTo(100, 100),
        ctx.lineTo(200,90);
        // 4.闭合路径
        ctx.closePath()
        // 5.填充或描边
        ctx.fill()
        ctx.stroke()
    </script>
</body>
</html>

在这里插入图片描述

绘制圆弧

arc(x,y,radius,startAngle,endAngle,anticclockwise)
画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。

x,y：圆心
radius：半径
startAngle,endAngle：圆弧的起始位置，一个圆是2π，即2*Math.PI，0为三点钟方向
anticclockwise：顺时针还是逆时针，默认为false，顺时针

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500"></canvas>

    <script>
        const canvas = document.getElementById('myCanvas')
        const ctx = canvas.getContext('2d');
        
        ctx.fillStyle = 'blue';
        ctx.strokeStyle = 'red';
        
        // 以100,100为圆心，100为半径，从0到90顺时针的圆弧
        ctx.beginPath();
        ctx.arc(100, 100, 100, 0, 0.5 * Math.PI, false)
        ctx.stroke()
        ctx.closePath()
        
        // 绘制圆弧, 以100,100为圆心，100为半径，从0到90逆时针的圆弧
        ctx.beginPath();
        ctx.arc(300, 300,80, 0, 0.5 * Math.PI, true)
        ctx.fill()
    </script>
</body>
</html>

透明度

ctx.globalAlpha，值为0到1的数字

线型

  1. 线的粗细 lineWidth：默认为1.0，属性值为数字，没有单位
  2. 线的形状 lineCap：可选值为butt：线段末端以方形结束、round：线段末端圆形结束、square：线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。在这里插入图片描述
  3. 两段连接处的样式lineJoin：可选值round、bevel、miter
  4. 虚线的样式setLineDash([n1,n2,n3,n4...])，表示虚线的交替状态，最少接收两个参数，奇数位置表示画线的长度，偶数位置表示间隔长度， lineDashOffset：可以设置虚线的起始偏移量

文本

  1. font 设置文字样式
  2. textAlign设置文字水平对齐方式，可选值left, center, right, end, start，默认start
  3. fillText('文本', x, y)

渐变

渐变有两种方式：线性渐变和径向渐变

线性渐变

  1. createLinerGradient(x1,y1,x2,y2)，指定渐变的开始点和结束点
  2. addColorStop(n, color)，n为0到1的值，表示当前渐变的位置，color表示渐变的颜色

径向渐变

  1. createRadialGradient(x1,y1,r1,x2,y2,r2)，指定渐变的开始圆形和结束圆形的xy坐标以及半径
  2. addColorStop(n, color)，n为0到1的值，表示当前渐变的位置，color表示渐变的颜色

阴影

  1. shadowOffsetX，shadowOffsetY，偏移量
  2. shadowBlur，模糊值
  3. shadowColor，阴影颜色

图片

在这里插入图片描述

  1. 创建一个image元素 let img = new Image()
  2. 设置img的src
  3. 在图片加载完成后（onLoad）绘制图片： drawImage(image, x, y, width, height, cx, cy, cwidth, cheight) , width,height可选，如果没有则宽高保持原图片宽高。四个参数表示图片的位置和宽高。如果有8个参数，代表的是从x,y的位置开始，切下宽为width高为height的图形切片，将切片拉伸为cwidth，cheight的图片再放到cx,cy的位置

变形

canvas的变形指的是整个画布的变形，而不是元素的变形。
因为变形实际上是将整个画布进行变形，所以一旦变形操作多了，会让会不变得不可控。下面先学习保存和恢复画布状态。
save()保存画布状态；restore() 恢复canvas状态这两个API的使用相当于一个入栈出栈的过程：save()入栈，restore()出栈。

一个绘画状态包括：

  1. 当前应用的变形（即移动，旋转和缩放等)
  2. 以下这些属性：strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline, direction, imageSmoothingEnabled
  3. 当前的裁切路径（clipping path）
    变形之前先备份，变形完成后恢复，不要影响下一次的操作
  1. 移动translate(x, y)
  2. 旋转rotate(deg:number)
  3. 缩放scale(xScale:number, yScale:number)

合成

合成其实就是我们常见的蒙版状态，本质就是如何进行压盖，如何进行显示
globalCompositeOpration

静静子~
关注
基于canvas绘制多条贝塞尔曲线组成3D双三次曲面片
学以致用 知行合一
05-05 1177
贝塞尔曲面是一种用于计算机图形学、计算机辅助设计和有限元建模的数学样条。与贝塞尔曲线一样，贝塞尔曲面由一组控制点定义。 贝塞尔曲面最常见的用途是作为双三次面片的网络（其中m = n = 3）。因此，单个双三次面片的几何形状完全由一组 16 个控制点定义。这些通常以与贝塞尔曲线连接形成 B 样条曲线类似的方式连接起来形成B 样条曲面。 贝塞尔曲面网格在表示光滑表面方面优于三角形网格。它们需要更少的点（因此更少的内存）来表示曲面，更易于操作，并且具有更好的连续性。此外，其他常......
使用Canvas绘制不完美/不规则的圆形
dawuafang
05-23 1076
真实世界是不完美的，当我们需要模拟真实世界时，经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。 本文介绍如何基于Canvas生成随机大小的不完美圆形，所用方法适用于很多场合，一个典型的用例如逼真的下雨场景。 首先我们要了解，在几何学上圆形可以通过增加等边对称多边形边数来无限逼近。 那么所谓不完美圆形，实际可以通过一个不等边不对称的多边形来实现。 要实现不等...
Canvas 基础属性以及不规则图形编辑
生命不息，学习不止
12-22 775
canvas基础知识，canvas对变形编辑，canvas重绘时闪烁
使用 Canvas 手画不规则多边形，并限制相交线和凹多边形
Coding home - 漂流瓶jz
03-07 4314
简介 使用 Canvas 实现的手画不规则多边形功能。通过鼠标在画面上点击的点作为多边形的顶点，连线形成多边形。除了手画之外，还加入了随机生成和回显，检测多边形横穿，凹凸性的检测。注意：两个点如果靠太近会被认为是同一个点而忽略。闭合区域需要点击图形中的第一个点，或者点击“闭合图形”按钮。 两个 Canvas 图层 由于要实现线条跟随鼠标运动功能，而且 Canvas 的图形无法清除单个绘制命令，因此我用 CSS 的绝对定位，在同一个区域叠加了两个 Canvas 对象。一个在下面，表示已经绘制结束的图形，叫做
canvas画不规则图形
菜鸟猿小天
04-01 4802
<template> <div class="test" style="position: relative;"> <canvas id="myCanvas" ref="myCanvas" width="460" height="240"> 您的浏览器不支持 HTML5 canvas 标签。 </canvas> ...
canvas学习笔记之2d画布基础的实现
01-21
Canvas是啥 < canvas> 是一个可以使用脚本（通常是js）来绘图的HTML元素 < canvas> 最早由Apple引入WebKit，用于Mac OS X 的 Dashboard和 Safari 如今，所有主流的浏览器都支持它（IE9+,更低版本需引入Explorer ...
html5中canvas学习笔记2-判断浏览器是否支持canvas
11-21
判断浏览器是否支持canvas，具体代码如下： 复制代码代码如下: <!DOCTYPE html> <head> <meta charset=utf-8 /> <title>canvas</title> [removed] [removed] = function(){ /**判断...
canvas学习笔记之绘制简单路径
01-21
1 线段（直线路径） 绘制线段一般步骤: moveTo(x,y) 移动画笔到指定的坐标点(x,y) lineTo(x,y) 使用直线连接当前端点和指定的坐标点(x,y) stroke() 根据当前的画线样式，绘制当前或已经存在的路径 ...
HTML5 Canvas学习笔记(1)处理鼠标事件
08-06
这篇“HTML5 Canvas学习笔记(1)处理鼠标事件”着重讲解了如何利用Canvas API来监听和响应鼠标的点击、移动等事件。 Canvas API提供了几个关键的方法来处理鼠标事件，包括`addEventListener`用于绑定事件处理函数，`...
canvas二维贴图
最新发布
iroek
06-14 183
【代码】canvas二维贴图。
画不规则图形并填充不规则图形
10-20
画不规则(闭合)图形、填充不规则图形、右键填充 填充方式有：种子填充、扫描填充、系统填充 默认为种子填充
canvas绘制不规则图形，点击获取当前图形索引
我灰灰凭啥输
10-26 1929
canvas绘制不规则图形，并给每个图形添加点击事件 有这么一个需求，把传过来的四个坐标，连成一个图形（可能是规则的，也可能是不规则的），点击某个图形，显示当前这个图形的信息 //数据格式 dataList: { lonLatList: null seatId: 1 //图形id state: 0 //状态 vehicleNo: null //车牌号 xyList: [ //根据经纬度转换的xy坐标 [58, 511], [81, 503], [23,
Path绘制不规则图形和判断坐标的位置
热门推荐
havakey的专栏
08-01 1万+
写这篇文章也是由于公司让我作一个非常困难但是非常炫的键盘开始的。本身我对绘图就不怎么明白，这不是赶鸭子上架吗？算啦，硬着头皮做吧。顺便给自己打个日记，以方便日后复习查找。 Path 是android 提供给我们绘制多边形和不规则图形的工具，其中不规则图形由直线和贝塞尔曲线构成。
Fabricjs在Canvas上使用路径Path绘制不规则图形
BADAO_LIUMANG_QIZHI的博客
02-10 2701
场景 Fabricjs在Canvas上插入照片并设置缩小和翻转属性： Fabricjs在Canvas上插入照片并设置缩小和翻转属性_BADAO_LIUMANG_QIZHI的博客-CSDN博客 在上面的基础上怎样实现绘制不规则图形 注： 博客：BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 1、官方教程地址 Introduction to F
canvas 的 图形组合方式
未玄的博客
09-01 1276
* 设置图形的组合方式: * 两个概念: * a, 源(source):要绘制的新图形 * b, 目标(destination): 可能已经绘制了图形的 2D 渲染上下文 * 11个属性值; * 1,source-over:绘制两者  源在目标上 * 2,destination-over:绘制两者  目标在源上 * 3,source-atop:绘制目标 和 源与目标重合的部分 * ...
canvas绘制形状
Insist_bin的博客
05-11 340
1.1 绘制形状1.1.1 绘制矩形绘制矩形路径ctx.rect（startX, startY, width, height）;绘制矩形框（描边矩形）ctx.strokeRect（startX, startY, width, height）;绘制填充矩形ctx.fillRect（startX, startY, width, height）;清除矩形区域ctx.clearRect（startX, s...
KonvaJS
weixin_30791095的博客
08-15 837
Konva 是一个 基于 Canvas 开发的 2d js 框架库, 它可以轻松的实现桌面应用和移动应用中的图形交互交互效果. Konva 可以高效的实现动画, 变换, 节点嵌套, 局部操作, 滤镜, 缓存, 事件等功能, 不仅仅适用于桌面与移动开发, 还有更为广泛的应用. Konva 允许在舞台上绘图, 添加事件监听, 移动或缩放某个图形, 独立旋转, 以及高效的动画. 即使应用中含有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值