html:<canvas id="canvas1" width="800" height="800"></canvas>canvas的宽高只能写在行内，同时决定画布分辨率的大小。css里面设定canvas的宽高并不是真正的大小，而是同比缩放js:var canvas = document.getElementById("canvas1");var context = can
原创
2022-04-24 17:15:22
204阅读
Canvas基础 HTML5中引入<canvas>标签，用于图形的绘制，<canvas>为图形的绘制提供了画布，是图形容器，具体的图形绘制由JavaScript来完成。 实例 <!-- 绘制冒泡效果 --> <!DOCTYPE html> <html> <head> <title>Canvas</t
原创
2022-05-28 00:54:37
198阅读
1 canvas基本用法1.1 什么是canvas(画布)<canvas> 是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图览器（尤其是IE9之前的IE浏览器）
原创
2022-11-07 17:35:40
124阅读
一 什么是canvas ？
MDN 中这样定义： 是 HTML5 新增的元素，一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。我们可以这样认为， 标签只是一个矩形的画布。JavaScript 就是画笔，负责在画布上画画。Canvas 是为了解决 Web 页面中只能显示静态图
原创
2023-11-23 10:34:57
259阅读
1. canvas 您的浏览器不支持 HTML5 canvas 标签。 2. canvas 您的浏览器不支持 HTML5 canvas 标签。 3. ca...
原创
2021-07-27 21:05:17
119阅读
1.<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>canvas</title></head><body> <canvas id="
原创
2022-06-30 17:24:39
48阅读
1. <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>canvas 绘制两个长方形</title></head><body> <can
原创
2022-06-30 17:24:45
97阅读
1.save(), restore() canvas 您的浏览器不支持 HTML5 canvas 标签。 2.translate() canvas 您的浏览器不支持 HTML5 ca...
原创
2021-07-27 21:05:16
142阅读
1. canvas 绘制两个长方形 您的浏览器不支持 HTML5 canvas 标签。 2. canvas 您的浏览器不支持 HTML5 canvas 标签。 ...
原创
2021-07-27 21:05:18
122阅读
1.save(), restore()<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>canvas</title></head><body> &l
原创
2022-06-30 17:25:23
57阅读
canvas 看起来和 img 元素很相像，唯一的不同就是它并没有 src 和 alt 属性。实际上，canvas 标签只有两个属性—— width和height。 canvas 元素创造了一个固定大小的画布，canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。你可以 ...
转载
2021-10-22 17:46:00
438阅读
2评论
上面我们玩了一个图表，大家学好结构，然后在那个基础上去扩展各种图表，慢慢就可以形成自己的图表库了。也可以多看看一些国外的图表库简单的版本，分析分析，读代码对提高用处很大。我说了canvas两大主流用途，一个是图表，一个是游戏，在写游戏项目之前，我们先来点基础，关于动画，没有动画基础讲canvas游戏
转载
2020-05-06 16:52:00
167阅读
2评论
Svg基础：以像素为单位，所以不用写单位。X是右，y是下。什么是svg：1. SVG 指可伸缩矢量图形 (Scalable Vector Graphics)2. SVG 用来定义用于网络的基于矢量的图形3. SVG 使用 XML 格式定义图形4. SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失5. SVG 是万维网联盟的标准6. SVG 与诸如 DOM 和 XSL 之类的 ...
原创
2022-01-13 14:01:29
328阅读
前些日子，前辈推荐了一个有趣的项目 —— Real-Time-Person-Removal，这个项目使用了 TensorFlow.js，以及 canvas 中的图像处理实现视频中的人物消失。借此机会，复习下 canvas 基础中的图像处理。基础 API canvas 的图像处理能力通过 ImageData 对象来处理像素数据。主要的 API 如下：createImageData()：创建一个空白的
转载
2022-02-16 11:19:30
166阅读
canvas练习1-基础资料查询动态创建一个DOM掌握 document相关的函数练习(1)绘图资源1. 画笔练习(2)2. 画刷练习(3)3. 鼠标移动事件4. 鼠标点击事件5. 鼠标双击事件综合练习资料查询api函数文档查询地址：https://developer.mozilla.org/en-US/动态创建一个DOM掌握 docum
原创
2022-03-30 11:56:28
141阅读
Canvas元素是HTML5中新增的一个重要元素，专门用来绘制图形。在页面上放置一个canvas元素，就相当于在页面上放置了一块“画布”，可以在其中进行图形的描绘。语法格式：<canvas></canvas>注意，在canvas元素里进行绘画，并不是指拿鼠标来作画。在网页上使用canvas元素时，它会创建一块矩形区域。默认情况下该矩形区域宽为300像素，高为150...
原创
2023-02-17 10:30:21
52阅读
