Skip to content

Commit e83ce7b

Browse files
chenliang12320chenliang12320
committed
0827
1 parent d07b73f commit e83ce7b

File tree

4 files changed

+216
-1
lines changed

4 files changed

+216
-1
lines changed

‎key.txt

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
1.canvas介绍
2+
2.canvas用法
3+
4+
设置canvas 环境
5+
渲染上下文、检查支持性
6+
7+
在 canvas 上绘制，绘制矩形，三角形，直线，圆弧和曲线，掌握路径
8+
栅格、绘制矩形（fillRect、strokeRect、clearRect）、绘制路径（beginPath、closePath、stroke、fill）、移动笔触moveTo、绘制直线lineTo、绘制圆弧或者圆（arc、arcTo）、贝塞尔曲线（二次quadraticCurveTo、三次bezierCurveTo）、矩形rect
9+
Path2D、 使用 SVG paths
10+
11+
arc 以横轴X，顺时针计算弧度, 和anticlockwise的方向没有关联
12+
13+
添加样式和颜色
14+
颜色（fillStyle、strokeStyle）、透明度globalAlpha、线型（半渲染）、渐变、图案样式 、阴影、
15+
Canvas 填充规则（nonzero、evenodd）
16+
17+
在canvas中绘制文本
18+
fillText、strokeText
19+
font、textAlign、textBaseline、direction
20+
measureText()
21+
22+
canvas更有意思的一项特性就是图像操作能力。可以用于动态的图像合成或者作为图形的背景，以及游戏界面（Sprites）
23+
图片的源：HTMLImageElement、HTMLVideoElement、HTMLCanvasElement、ImageBitmap
24+
一个常用的应用就是将第二个canvas作为另一个大的 canvas 的缩略图。
25+
通过 data: url 方式嵌入图像
26+
绘制图片drawImage(image, x, y)
27+
缩放drawImage(image, x, y, width, height)
28+
切片drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
29+
30+
到目前为止，我们只是根据我们的需要使用默认的网格，改变整个画布的大小。变形是一种更强大的方法，可以将原点移动到另一点、对网格进行旋转和缩放。
31+
状态的保存和恢复：save、restore
32+
当前应用的变形（即移动，旋转和缩放，见下）
33+
strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation 的值
34+
当前的裁切路径（clipping path）
35+
移动translate(x, y)
36+
旋转rotate(angle)
37+
缩放scale(x, y)
38+
transform(m11, m12, m21, m22, dx, dy) 、 resetTransform
39+
40+
组合与裁剪
41+
globalCompositeOperation = type
42+
clip()将当前正在构建的路径转换为当前的裁剪路径。
43+
裁切路径不会在 canvas 上绘制东西，而且它永远不受新图形的影响
44+
动画
45+
清空 canvas
46+
保存 canvas 状态
47+
绘制动画图形
48+
恢复 canvas 状态
49+
requestAnimationFrame(callback)
50+
51+
像素操作
52+
ImageData （width、height、data）
53+
createImageData、putImageData
54+
使用场景:颜色选择器、图片灰度和反相颜色、缩放和反锯齿
55+
保存图片：返回一个包含被类型参数规定的图像表现格式的数据链接。返回的图片分辨率是96dpi。
56+
canvas.toDataURL('image/png')
57+
canvas.toDataURL('image/jpeg', quality)
58+
canvas.toBlob(callback, type, encoderOptions)
59+
60+
canvas 的优化
61+
在离屏canvas上预渲染相似的图形或重复的对象
62+
避免浮点数的坐标点，用整数取而代之
63+
不要在用drawImage时缩放图像
64+
使用多层画布去画一个复杂的场景
65+
用CSS设置大的背景图
66+
用CSS transforms特性缩放画布
67+
关闭透明度
68+
将画布的函数调用集合到一起（例如，画一条折线，而不要画多条分开的直线）
69+
避免不必要的画布状态改变
70+
渲染画布中的不同点，而非整个新状态
71+
尽可能避免 shadowBlur特性
72+
尽可能避免text rendering
73+
使用不同的办法去清除画布(clearRect() vs. fillRect() vs. 调整canvas大小)
74+
有动画，请使用window.requestAnimationFrame() 而非window.setInterval()
75+
请谨慎使用大型物理库
76+
77+
库
78+
Canvas API是非常强大的，但不总是很容易使用。以下列出的库能够使创建基于canvas的项目更快和更简单。
79+
EaselJS 使制作游戏、创作类艺术和其他侧重图形项目更容易的开源canvas库
80+
Fabric.js 具有SVG解析功能的开源canvas库
81+
heatmap.js 基于 canvas的热点图的开源库
82+
JavaScript InfoVis Toolkit 创建交互式的2D Canvas数据可视化
83+
Konva.js 用于桌面端和移动端应用的2D canvas库
84+
p5.js 包含给艺术家、设计师、教育者、初学者使用的完整的canvas绘制功能
85+
Paper.js 运行于HTML5 Canvas上的开源矢量图形脚本框架
86+
Phaser 用于基于Canvas和WebGL的浏览器尤其的快速、自由、有趣的开源框架
87+
Processing.js 用于处理可视化语言
88+
Pts.js 在canvas和SVG中进行创意性代码写作和可视化的库
89+
Rekapi 关键帧动画库
90+
Scrawl-canvas 用来创建和编辑2D图形的开源库
91+
ZIM 框架为canvas上的代码创意性提供方便性、组件和可控性，包括可用性和数百个色彩缤纷的教程

‎note_basic.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
beginPath 新建一条路径
55
绘制命令指向路径，生成路径
66
closePath 闭合路径 绘制命令指向上下文
7-
3. 绘制命令有： fillRect stroke fill moveTo lineTo
7+
3. 绘制命令有： fillRect strokeRect stroke fill moveTo lineTo
88
arc(x, y, radius, startAngle, endAngle, anticlockwise)
99
以横轴X，顺时针计算弧度, 和anticlockwise的方向没有关联
1010

‎s.js

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
// https://observablehq.com/@d3/kernel-density-estimation@109
2+
export default function define(runtime, observer) {
3+
const main = runtime.module();
4+
main.variable(observer()).define(["md"], function(md){return(
5+
md`# Kernel Density Estimation
6+
7+
[Kernel density estimation](https://en.wikipedia.org/wiki/Kernel_density_estimation), or KDE, estimates the probability distribution of a random variable. The kernel’s *bandwidth* determines the estimate’s smoothness: if the bandwidth is too small, the estimate may include spurious bumps and wiggles; too large, and the estimate reveals little about the underlying distribution.
8+
9+
This example, based on [work by John Firebaugh](https://bl.ocks.org/jfirebaugh/900762), shows times between eruptions of [Old Faithful](https://en.wikipedia.org/wiki/Old_Faithful). See also a [two-dimensional density estimation](/@d3/density-contours) of this data.`
10+
)});
11+
main.variable(observer("viewof bandwidth")).define("viewof bandwidth", ["html"], function(html)
12+
{
13+
const form = html`<form>
14+
<input name=i type=range min=1 max=20 value=7 step=any style="width:180px;">
15+
<output style="font-size:smaller;font-style:oblique;" name=o></output>
16+
</form>`;
17+
form.i.oninput = () => form.o.value = `${(form.value = form.i.valueAsNumber).toFixed(1)} bandwidth`;
18+
form.i.oninput();
19+
return form;
20+
}
21+
);
22+
main.variable(observer("bandwidth")).define("bandwidth", ["Generators", "viewof bandwidth"], (G, _) => G.input(_));
23+
main.variable(observer("chart")).define("chart", ["d3","width","height","bins","x","y","data","density","line","xAxis","yAxis"], function(d3,width,height,bins,x,y,data,density,line,xAxis,yAxis)
24+
{
25+
const svg = d3.create("svg")
26+
.attr("viewBox", [0, 0, width, height]);
27+
28+
svg.append("g")
29+
.attr("fill", "#bbb")
30+
.selectAll("rect")
31+
.data(bins)
32+
.join("rect")
33+
.attr("x", d => x(d.x0) + 1)
34+
.attr("y", d => y(d.length / data.length))
35+
.attr("width", d => x(d.x1) - x(d.x0) - 1)
36+
.attr("height", d => y(0) - y(d.length / data.length));
37+
38+
svg.append("path")
39+
.datum(density)
40+
.attr("fill", "none")
41+
.attr("stroke", "#000")
42+
.attr("stroke-width", 1.5)
43+
.attr("stroke-linejoin", "round")
44+
.attr("d", line);
45+
46+
svg.append("g")
47+
.call(xAxis);
48+
49+
svg.append("g")
50+
.call(yAxis);
51+
52+
return svg.node();
53+
}
54+
);
55+
main.variable(observer("kde")).define("kde", ["d3"], function(d3){return(
56+
function kde(kernel, thresholds, data) {
57+
return thresholds.map(t => [t, d3.mean(data, d => kernel(t - d))]);
58+
}
59+
)});
60+
main.variable(observer("epanechnikov")).define("epanechnikov", function(){return(
61+
function epanechnikov(bandwidth) {
62+
return x => Math.abs(x /= bandwidth) <= 1 ? 0.75 * (1 - x * x) / bandwidth : 0;
63+
}
64+
)});
65+
main.variable(observer("line")).define("line", ["d3","x","y"], function(d3,x,y){return(
66+
d3.line()
67+
.curve(d3.curveBasis)
68+
.x(d => x(d[0]))
69+
.y(d => y(d[1]))
70+
)});
71+
main.variable(observer("x")).define("x", ["d3","data","margin","width"], function(d3,data,margin,width){return(
72+
d3.scaleLinear()
73+
.domain(d3.extent(data)).nice()
74+
.range([margin.left, width - margin.right])
75+
)});
76+
main.variable(observer("y")).define("y", ["d3","bins","data","height","margin"], function(d3,bins,data,height,margin){return(
77+
d3.scaleLinear()
78+
.domain([0, d3.max(bins, d => d.length) / data.length])
79+
.range([height - margin.bottom, margin.top])
80+
)});
81+
main.variable(observer("xAxis")).define("xAxis", ["height","margin","d3","x","width","data"], function(height,margin,d3,x,width,data){return(
82+
g => g
83+
.attr("transform", `translate(0,${height - margin.bottom})`)
84+
.call(d3.axisBottom(x))
85+
.call(g => g.append("text")
86+
.attr("x", width - margin.right)
87+
.attr("y", -6)
88+
.attr("fill", "#000")
89+
.attr("text-anchor", "end")
90+
.attr("font-weight", "bold")
91+
.text(data.title))
92+
)});
93+
main.variable(observer("yAxis")).define("yAxis", ["margin","d3","y"], function(margin,d3,y){return(
94+
g => g
95+
.attr("transform", `translate(${margin.left},0)`)
96+
.call(d3.axisLeft(y).ticks(null, "%"))
97+
.call(g => g.select(".domain").remove())
98+
)});
99+
main.variable(observer("thresholds")).define("thresholds", ["x"], function(x){return(
100+
x.ticks(40)
101+
)});
102+
main.variable(observer("density")).define("density", ["kde","epanechnikov","bandwidth","thresholds","data"], function(kde,epanechnikov,bandwidth,thresholds,data){return(
103+
kde(epanechnikov(bandwidth), thresholds, data)
104+
)});
105+
main.variable(observer("bins")).define("bins", ["d3","x","thresholds","data"], function(d3,x,thresholds,data){return(
106+
d3.histogram()
107+
.domain(x.domain())
108+
.thresholds(thresholds)
109+
(data)
110+
)});
111+
main.variable(observer("data")).define("data", ["d3"], async function(d3){return(
112+
Object.assign(await d3.json("https://gist.githubusercontent.com/mbostock/4341954/raw/99757f8851178fbf60ff2173f322d1eb702d250f/faithful.json"), {title: "Time between eruptions (min.)"})
113+
)});
114+
main.variable(observer("height")).define("height", function(){return(
115+
500
116+
)});
117+
main.variable(observer("margin")).define("margin", function(){return(
118+
{top: 20, right: 30, bottom: 30, left: 40}
119+
)});
120+
main.variable(observer("d3")).define("d3", ["require"], function(require){return(
121+
require("d3@5")
122+
)});
123+
return main;
124+
}

‎使用-HTML5-canvas-进行-Web-绘图.doc

2 KB
Binary file not shown.

0 commit comments

Comments
 (0)