feat: add docs/canvas.md
This commit is contained in:
jaywcjlove
parent
345e968c4c
commit
ad2fd7b642
@ -102,6 +102,7 @@ Quick Reference
|
||||
[Emmet](./docs/emmet.md)<!--rehype:style=background: rgb(122 203 23);-->
|
||||
[ES 6](./docs/es6.md)<!--rehype:style=background: rgb(122 203 23);&class=tag&data-lang=JS-->
|
||||
[HTML](./docs/html.md)<!--rehype:style=background: rgb(228 77 39);-->
|
||||
[HTML Canvas](./docs/canvas.md)<!--rehype:style=background: rgb(228 77 39);-->
|
||||
[JavaScript](./docs/javascript.md)<!--rehype:style=background: rgb(203 183 31);-->
|
||||
[jQuery](./docs/jquery.md)<!--rehype:style=background: rgb(203 183 31);-->
|
||||
[Next.js](./docs/nextjs.md)<!--rehype:style=background: rgb(0 0 0);&class=tag&data-lang=React-->
|
||||
|
||||
2
assets/canvas.svg
Normal file
2
assets/canvas.svg
Normal file
@ -0,0 +1,2 @@
|
||||
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="1em" height="1em"><path d="M861.098667 736.554667l73.472 146.261333a38.4 38.4 0 0 1-1.706667 37.546667 38.826667 38.826667 0 0 1-32.981333 18.304H512a38.741333 38.741333 0 0 1-33.066667-18.261334 38.4 38.4 0 0 1-1.664-37.589333l10.752-21.333333H221.098667a58.026667 58.026667 0 0 1-58.197334-57.941334V474.453333C116.096 439.168 85.333333 383.829333 85.333333 321.024 85.333333 214.570667 172.373333 128 279.253333 128c63.146667 0 118.698667 30.592 154.154667 77.226667h369.493333a58.026667 58.026667 0 0 1 58.197334 57.898666v473.429334zm-155.178667-136.192-131.157333 261.12h262.357333l-131.2-261.12zM240.469333 510.122667v274.133333h286.336l144.426667-287.488c13.184-26.154667 56.234667-26.154667 69.376 0l42.922667 85.333333V282.453333h-314.282667a192.64 192.64 0 0 1-52.992 174.933334 194.773333 194.773333 0 0 1-175.786667 52.778666zm38.826667-73.301334a116.053333 116.053333 0 0 0 116.352-115.797333A116.053333 116.053333 0 0 0 279.253333 205.226667a116.053333 116.053333 0 0 0-116.352 115.797333 116.053333 116.053333 0 0 0 116.352 115.797333z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
253
docs/canvas.md
Normal file
253
docs/canvas.md
Normal file
@ -0,0 +1,253 @@
|
||||
HTML Canvas 备忘清单
|
||||
===
|
||||
|
||||
这份 HTML Canvas 快速参考备忘单列出了常见的 HTML5 Canvas 设计标签，以易读的格式呈现。
|
||||
|
||||
入门
|
||||
---
|
||||
<!--rehype:body-class=cols-4-->
|
||||
|
||||
### 基本设置
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Canvas 示例</title>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="myCanvas" width="500" height="400"
|
||||
style="border:1px solid #000000;">
|
||||
</canvas>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### 获取上下文
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
```js
|
||||
const canvas = document.getElementById("myCanvas");
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
```
|
||||
|
||||
绘制形状
|
||||
---
|
||||
|
||||
### 矩形
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
```js
|
||||
ctx.fillStyle = "red";
|
||||
ctx.fillRect(10, 10, 150, 100); // x, y, 宽度, 高度
|
||||
|
||||
ctx.strokeStyle = "blue";
|
||||
ctx.lineWidth = 5;
|
||||
ctx.strokeRect(200, 10, 150, 100); // x, y, 宽度, 高度
|
||||
|
||||
ctx.clearRect(15, 15, 30, 30); // x, y, 宽度, 高度
|
||||
```
|
||||
|
||||
路径
|
||||
---
|
||||
|
||||
### 线条
|
||||
|
||||
```js
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(50, 50); // 起始点
|
||||
ctx.lineTo(200, 50); // 结束点
|
||||
ctx.lineTo(200, 200); // 下一个线条结束点
|
||||
ctx.closePath(); // 将结束点连接到起始点
|
||||
ctx.stroke();
|
||||
```
|
||||
|
||||
### 圆形
|
||||
|
||||
```js
|
||||
ctx.beginPath();
|
||||
// x, y, 半径, 起始角度, 结束角度
|
||||
ctx.arc(150, 150, 75, 0, 2 * Math.PI);
|
||||
ctx.fillStyle = "green";
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
```
|
||||
|
||||
### 弧
|
||||
|
||||
```js
|
||||
ctx.beginPath();
|
||||
// x, y, 半径, 起始角度, 结束角度
|
||||
ctx.arc(150, 150, 75, 0, Math.PI);
|
||||
ctx.stroke();
|
||||
```
|
||||
|
||||
贝塞尔曲线和二次曲线
|
||||
---
|
||||
|
||||
### 二次曲线
|
||||
|
||||
```js
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(50, 250);
|
||||
// cpX, cpY, 终点X, 终点Y
|
||||
ctx.quadraticCurveTo(200, 100, 400, 250);
|
||||
ctx.stroke();
|
||||
```
|
||||
|
||||
### 贝塞尔曲线
|
||||
|
||||
```js
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(50, 300);
|
||||
// cp1X, cp1Y, cp2X, cp2Y, 终点X, 终点Y
|
||||
ctx.bezierCurveTo(150, 100, 350, 500, 450, 300);
|
||||
ctx.stroke();
|
||||
```
|
||||
|
||||
### 文本
|
||||
|
||||
```js
|
||||
ctx.font = "30px Arial";
|
||||
ctx.fillStyle = "black";
|
||||
// 文本, x, y
|
||||
ctx.fillText("Hello Canvas", 10, 50);
|
||||
// 文本, x, y
|
||||
ctx.strokeText("Hello Canvas", 10, 100);
|
||||
```
|
||||
|
||||
### 图像
|
||||
<!--rehype:wrap-class=col-span-3-->
|
||||
|
||||
```js
|
||||
const img = new Image();
|
||||
img.src = "path/to/image.jpg";
|
||||
img.onload = () => {
|
||||
ctx.drawImage(img, 10, 10); // img, x, y
|
||||
ctx.drawImage(img, 50, 50, 100, 100); // img, x, y, 宽度, 高度
|
||||
ctx.drawImage(img, 100, 100, 100, 100, 150, 150, 200, 200); // img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight
|
||||
};
|
||||
```
|
||||
|
||||
变换
|
||||
---
|
||||
|
||||
### 平移
|
||||
|
||||
```js
|
||||
ctx.translate(100, 100); // x, y
|
||||
ctx.fillRect(0, 0, 50, 50);
|
||||
```
|
||||
|
||||
### 旋转
|
||||
|
||||
```js
|
||||
// 角度（以弧度为单位）
|
||||
ctx.rotate((Math.PI / 180) * 45);
|
||||
ctx.fillRect(100, 100, 50, 50);
|
||||
```
|
||||
|
||||
### 缩放
|
||||
|
||||
```js
|
||||
ctx.scale(2, 2); // x, y
|
||||
ctx.fillRect(50, 50, 50, 50);
|
||||
```
|
||||
|
||||
渐变
|
||||
---
|
||||
|
||||
### 线性渐变
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
```js
|
||||
const linearGradient = ctx.createLinearGradient(0, 0, 200, 0); // x0, y0, x1, y1
|
||||
linearGradient.addColorStop(0, "red");
|
||||
linearGradient.addColorStop(1, "blue");
|
||||
ctx.fillStyle = linearGradient;
|
||||
ctx.fillRect(10, 10, 200, 100);
|
||||
```
|
||||
|
||||
### 径向渐变
|
||||
|
||||
```js
|
||||
const radialGradient = ctx.createRadialGradient(75, 50, 5, 90, 60, 100); // x0, y0, r0, x1, y1, r1
|
||||
radialGradient.addColorStop(0, "red");
|
||||
radialGradient.addColorStop(1, "blue");
|
||||
ctx.fillStyle = radialGradient;
|
||||
ctx.fillRect(10, 10, 200, 100);
|
||||
```
|
||||
|
||||
### 图案
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
```js
|
||||
const img = new Image();
|
||||
img.src = "path/to/image.jpg";
|
||||
img.onload = () => {
|
||||
// 'repeat', 'repeat-x', 'repeat-y', 'no-repeat'
|
||||
const pattern = ctx.createPattern(img, "repeat");
|
||||
ctx.fillStyle = pattern;
|
||||
ctx.fillRect(0, 0, 300, 300);
|
||||
};
|
||||
```
|
||||
|
||||
### 阴影
|
||||
|
||||
```js
|
||||
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
|
||||
ctx.shadowBlur = 10;
|
||||
ctx.shadowOffsetX = 5;
|
||||
ctx.shadowOffsetY = 5;
|
||||
|
||||
ctx.fillStyle = "red";
|
||||
ctx.fillRect(100, 100, 100, 100);
|
||||
```
|
||||
|
||||
合成
|
||||
---
|
||||
|
||||
### 全局透明度
|
||||
|
||||
```js
|
||||
ctx.globalAlpha = 0.5;
|
||||
ctx.fillStyle = "red";
|
||||
ctx.fillRect(100, 100, 100, 100);
|
||||
|
||||
ctx.fillStyle = "blue";
|
||||
ctx.fillRect(150, 150, 100, 100);
|
||||
```
|
||||
|
||||
### 全局合成操作
|
||||
|
||||
```js
|
||||
ctx.globalCompositeOperation = "source-over"; // 默认
|
||||
ctx.fillStyle = "red";
|
||||
ctx.fillRect(100, 100, 100, 100);
|
||||
|
||||
ctx.globalCompositeOperation = "destination-over";
|
||||
ctx.fillStyle = "blue";
|
||||
ctx.fillRect(150, 150, 100, 100);
|
||||
```
|
||||
|
||||
### 动画
|
||||
|
||||
```js
|
||||
let x = 0;
|
||||
function draw() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = "blue";
|
||||
ctx.fillRect(x, 100, 50, 50);
|
||||
x += 2;
|
||||
requestAnimationFrame(draw);
|
||||
}
|
||||
draw();
|
||||
```
|
||||
|
||||
参考阅读
|
||||
---
|
||||
|
||||
- [MDN 文档](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)
|
||||
@ -1018,7 +1018,7 @@ H2 部分 - 5列效果展示
|
||||
...
|
||||
```
|
||||
|
||||
[#示例](https://github.com/jaywcjlove/reference/blob/ee03850619440e3700ed68ccc2ed21d3591a1490/docs/quickreference.md?plain=1#L986-L991)<!--rehype:target=__blank-->
|
||||
[#示例](https://github.com/jaywcjlove/reference/blob/8ae69f23860c1854a81aeceb81a6cc0bc0998fc4/docs/quickreference.md?plain=1#L1012-L1021)<!--rehype:target=__blank-->
|
||||
|
||||
### Two
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user