Canvas
全新Canvas全网最详细课程（2023年2月新更）!
https://www.bilibili.com/video/BV1kv4y1D7uS 2 4
01-初识canvas
echarts 炫酷动画
//1.找到画布
var c1 = document.getElementById（"c1"）；
//判断是否有getContext if（Ic1.getContext）{
console.log（"当前浏览器不支持canvas□请下载最新的浏览器"）；
//2.获取画笔，上下文对象
看属性 jdg
02-canvas上下文对象与浏览器支持
03-Canvas填充与路径绘制
04-canvas绘制圆弧与笑脸
https://www.yuque.com/yun41s/bbsl9p/xer8s8#rKH5V
05-绘制折线线段
06-arcTo绘制圆弧方式
07-二次贝塞尔曲线实现聊天气泡框
二次贝塞尔曲线及三次贝塞尔曲线
08-三次贝塞尔曲线实现献给朋友的爱心
09-封装路径Path2d
Path2D 对象
2022CANVAS详解教程
var heartPath = new Path2D（）
11-创建一条折线
var polyline = new Path2D（"M10 10 h 80 v 80 h-80
ctx.stroke（polyline）；
10-颜色样式控制
//3.1 绘制矩形fillRect（位置x.位置y.宽度，高度）let linearGradient = ctx.createlinearGradient（100，200，400，500）；linearGradient.addColorStop（0，"red"）；
11-线型渐变和径向渐变
12-圆锥渐变特效
13-pattern印章填充样式
图案样式 Patterns
创建图案对象createPattern（图片对象，重复方式）
var pattern = ctx.createPattern（img，"repeat"）；
14-线段和虚线样式设置
//设置线条样式，默认1px ctx.lineWidth=40；
//设置线条端点样式，butt平齐。round半圈，正方形：square ctx.lineCap ="square"；
//设置2个线段连接处的样式，itter外例相连的角，round角被磨西了，bevel ctx.lineJoin-"bevel"；cty stroke（١
15-canvas阴影设置
阴影 Shadows
shadowOffsetX = float
https://www.yuque.com/yun41s/bbsl9p/mulvlb
16-canvas绘制图片的三种模式
'/ctx.drawImage（img，0，0）；
17-canvas绘制动态视频并添加水印
var video = document.querySelector（"video"）；
//获取按钮
let btn = document.querySelector（"#btn"）；btn.onclick = function（）
video.play（）；
）；function render（
ctx.drawImage（video，0，0，600，400）；script>
定时重新绘制 分镇
css 标签 hide
18-文字绘制与对齐
19-位移_缩放_旋转变换
20-transform使用矩阵完成图像变换操作
21-canvas合成图像模式
大纲
06-合成
globalCe我们总是将一个图形画在另一个之上，对于其他更多的情况，仅仅这样是远远不够的。比如，对合成的图形来说，绘制顺序会有限制，不过，我们可以利用globalCompositeOperation属性来改变这种状况，此外，clip属性允许我们隐藏不想看到的部分图形。
globalCompositeOperation我们不仅可以在已有图形后面再画新图形，还可以用来遮盖指定区域，清除画布中的某些部分（清除区域不仅限于矩形，像clearRect0方法做的那样）以及更多其他操作。
globalCompositeOperation = type这个属性设定了在画新图形时采用的遮盖策略，其值是一个标识12种遮盖方式的字符串。渐查看下面Compositing 示例的代码
source-over
22-合成图像实现刮刮卡
ctx.globalCompositeOperation = "destination-out";
23-裁剪路径
ctx.fill(heartPath);
24-状态的保存和恢复
状态的保存和恢复 Saving and restoring state在了解变形之前，我先介绍两个在你开始绘制复杂图形时必不可少的方法。
saveo保存画布（canvas）的所有状态
restore0
save 和 restore方法是用来保存和恢复canvas状态的，都没有参数.Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。
Canvas 状态存储在栈中，每当save0方法被调用后，当前的状态就被推送到线中保存。一个绘画状态包括：
ctx. save(); ctx. fillStyle = "green"; ctx. fillRect(300, 300, 100, 100); ctx. restore();
25-像素操作
10-像素操作
到目前为止，我们尚未深入了解Canvas画布真实像素的原理，事实上，你可以直接通过ImageData对象操纵像素数据，直接读取或将数据数组写入该对象中，稍后我们也将深入了解如何控制图像使其平滑（反锯齿）以及如何从 Canvas 画布中保存图像。
ImageData 对象
ImageData对象中存储着 canvas 对象真实的像素数据，它包含以下几个只读属性：
width图片宽度，单位是像素
ctx.drawImage（img，0，0，600，400）；let imageData = ctx.getImageData（0，0，600，400）；
//获取像素数据
//将修改后的数据重新渲染到圖布上ctx.putImageData（imageData，0，0）；
26-高级封装绘制元素和实现元素交互
27-canvas实现在线画板
28-canvas绘制动态时钟
01-Pixi初识和搭建Pixi应用
PixiJS HTML5创作引擎
使用最快、最灵活的 2D WebGL 渲染器创建精美的数字内容。
海报 / 分享截图
PIX1.JS import * as PIXI from "pixi.js"
02-Pixi图形Graphics具体应用
03-Pixi绘制各种常见图形f
04-Pixi纹理与动画实现
//创建一个纹理
const texture PIXI.Texture.from（"https://pixijs.io/examples/examples/assets/bunny.png"
npm install pixi.js
05-Pixi事件交互
06-Pixi资源管理
07-Pixi文字与遮罩
08-Pixi滤镜特效
456
//创建模糊滤镜
7
const blurFilter = new PIXI.Blurfilter（）；
//设置模糊認境的模糊程度
<template>
<div>
</div>
</template>
<script setup>
import { Application, Sprite, Assets } from 'pixi.js';
// The application will create a renderer using WebGL, if possible,
// with a fallback to a canvas render. It will also setup the ticker
// and the root stage PIXI.Container
const app = new Application();
// Wait for the Renderer to be available
await app.init();
// The application will create a canvas element for you that you
// can then insert into the DOM
document.body.appendChild(app.canvas);
// load the texture we need
const texture = await Assets.load('bunny.png');
// This creates a texture from a 'bunny.png' image
const bunny = new Sprite(texture);
// Setup the position of the bunny
bunny.x = app.renderer.width / 2;
bunny.y = app.renderer.height / 2;
// Rotate around the center
bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;
// Add the bunny to the scene we are building
app.stage.addChild(bunny);
// Listen for frame updates
app.ticker.add(() => {
// each frame we spin the bunny around a bit
bunny.rotation += 0.01;
});
</script>
浙公网安备 33010602011771号