Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(zh-tw): remove screenshots from EmbedLiveSample calls #19142

Merged
merged 4 commits into from
Apr 1, 2024
Merged

chore(zh-tw): remove screenshots from EmbedLiveSample calls #19142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
66b49de
chore(zh-tw): remove screenshots from EmbedLiveSample calls
yin1999 Apr 1, 2024
531f81d
fix the `unsafe_html` flaw
yin1999 Apr 1, 2024
51b7c0e
remove redundant image references
jasonren0403 Apr 1, 2024
adcb173
fix example
jasonren0403 Apr 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 15 additions & 19 deletions files/zh-tw/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ slug: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors

{{DefaultAPISidebar("Canvas API")}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}

在[繪畫圖形](/zh-TW/docs//zh-TW/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes)章節中，我們只用了預設的線條與填滿樣式，而在本章，我們將進一步看看所有可用的樣式選項，畫出更吸引人的圖。
在[繪畫圖形](/zh-TW/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)章節中，我們只用了預設的線條與填滿樣式，而在本章，我們將進一步看看所有可用的樣式選項，畫出更吸引人的圖。

## 顏色

Expand Down Expand Up @@ -66,7 +66,7 @@ draw();

結果如下:

{{EmbedLiveSample("fillStyle 範例", 160, 160, "canvas_fillstyle.png")}}
{{EmbedLiveSample("fillStyle 範例", 160, 160)}}

### `strokeStyle` 範例

Expand Down Expand Up @@ -101,7 +101,7 @@ draw();

結果如下:

{{EmbedLiveSample("strokeStyle 範例", "180", "180", "canvas_strokestyle.png")}}
{{EmbedLiveSample("strokeStyle 範例", "180", "180")}}

## 透明度

Expand Down Expand Up @@ -161,7 +161,7 @@ function draw() {
draw();
```

{{EmbedLiveSample("globalAlpha 範例", "180", "180", "canvas_globalalpha.png")}}
{{EmbedLiveSample("globalAlpha 範例", "180", "180")}}

### `rgba()` 使用範例

Expand Down Expand Up @@ -199,7 +199,7 @@ function draw() {
draw();
```

{{EmbedLiveSample("rgba_使用範例", "180", "180", "canvas_rgba.png")}}
{{EmbedLiveSample("rgba_使用範例", "180", "180")}}

## 線條樣式

Expand Down Expand Up @@ -245,7 +245,7 @@ function draw() {
draw();
```

{{EmbedLiveSample("lineWidth 範例", "180", "180", "canvas_linewidth.png")}}
{{EmbedLiveSample("lineWidth 範例", "180", "180")}}

為了畫出清晰的直線，我們需要了解繪圖路徑是如何產生；如下方圖示，網格代表畫布座標軸，網格所框出的方格則代表螢幕上的像素，第一張圖片填滿了座標(2,1)到(5,5)的紅色區域，而這個紅色區域的邊際正好符合像素間的邊際，所以會產生出清晰的影像。

Expand All @@ -265,14 +265,12 @@ draw();

這個屬性決定線條端點的樣式，總共有三種樣式可選:

![](canvas_linecap.png)

- `butt`
- : 線條端點樣式為方形
- : 線條端點樣式為方形。
- `round`
- : 線條端點樣式為圓形
- : 線條端點樣式為圓形。
- `square`
- : 增加寬同線條寬度、高線條寬度一半的的方塊於線條端點
- : 增加寬同線條寬度、高線條寬度一半的的方塊於線條端點。

下面程式碼會畫出三條線，每條線的 lineCap 值皆不同。然後為了看清差異點，我們加上了兩條淡藍色的輔助線，線條的繪圖起始點和終點都剛好落在輔助線上。

Expand Down Expand Up @@ -313,16 +311,14 @@ function draw() {
draw();
```

{{EmbedLiveSample("lineCap 範例", "180", "180", "canvas_linecap.png")}}
{{EmbedLiveSample("lineCap 範例", "180", "180")}}

### `lineJoin` 範例

lineJoin 屬性決定兩個連接區端(如線條、弧形或曲線)如何連接(對於長度為零，亦即終點和控制點為同一點的圖形無效)。

lineJoin 屬性共有三個屬性值如下，其中 miter 為預設值，請注意一點若是兩個連接區段的繪圖方向一致，那代表不會有連接處，所以測定是無效的。

![](canvas_linejoin.png)

- `round`
- : 代表圓弧型連接樣式。
- `bevel`
Expand Down Expand Up @@ -358,7 +354,7 @@ function draw() {
draw();
```

{{EmbedLiveSample("lineJoin 範例", "180", "180", "canvas_linejoin.png")}}
{{EmbedLiveSample("lineJoin 範例", "180", "180")}}

### `miterLimit` 屬性

Expand Down Expand Up @@ -439,7 +435,7 @@ document.getElementById("miterLimit").value = document
draw();
```

{{EmbedLiveSample("miterLimit 屬性", "400", "180", "canvas_miterlimit.png")}}
{{EmbedLiveSample("miterLimit 屬性", "400", "180")}}

## 漸層

Expand Down Expand Up @@ -511,7 +507,7 @@ draw();

第二個漸層起始位置(position 0.0)的顏色並沒有被指定，所以下一個漸層顏色會自動被設為起始位置顏色，因此即使我們沒有指定漸層起始位置顏色也沒有關係，就像本範例自動會設定起始位置的顏色等於位置 0.5 的黑色。

{{EmbedLiveSample("createLinearGradient 範例", "180", "180", "canvas_lineargradient.png")}}
{{EmbedLiveSample("createLinearGradient 範例", "180", "180")}}

### `createRadialGradient` 範例

Expand Down Expand Up @@ -566,7 +562,7 @@ draw();

每一個漸層圖案最後一個漸層色都是全透明的，如果希望倒數第二個漸層色能夠平順地轉換到這個最後一個漸層色，那麼兩者應該設定一樣的顏色值，像是程式碼範例中的漸層色 #019F62 其實就等於 rgba(1,159,98,1)。

{{EmbedLiveSample("createRadialGradient 範例", "180", "180", "canvas_radialgradient.png")}}
{{EmbedLiveSample("createRadialGradient 範例", "180", "180")}}

## 樣式(Patterns)

Expand Down Expand Up @@ -677,6 +673,6 @@ function draw() {
draw();
```

{{EmbedLiveSample("文字陰影範例", "180", "100", "shadowed-string.png")}}
{{EmbedLiveSample("文字陰影範例", "180", "100")}}

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Using_images", "Web/Guide/HTML/Canvas_tutorial/Transformations")}}
26 changes: 15 additions & 11 deletions files/zh-tw/web/api/canvas_api/tutorial/basic_usage/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,31 +114,35 @@ if (canvas.getContext) {
首先，讓我們先來畫兩個相交的正方形，其中一個正方形有 alpha 透明值，之後我們會說明這是如何達成的。

```html
<html>
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Canvas experiment</title>
</head>
<body>
<canvas id="canvas" width="150" height="150"></canvas>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
const canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect(10, 10, 55, 50);
ctx.fillStyle = "rgb(200 0 0)";
ctx.fillRect(10, 10, 50, 50);

ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect(30, 30, 55, 50);
ctx.fillStyle = "rgb(0 0 200 / 50%)";
ctx.fillRect(30, 30, 50, 50);
}
}
draw();
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
```

本範例的結果如下:

{{EmbedLiveSample("一個簡單的範例", 160, 160, "canvas_ex1.png")}}
{{EmbedLiveSample("一個簡單的範例", 160, 160)}}

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial", "Web/Guide/HTML/Canvas_tutorial/Drawing_shapes")}}
31 changes: 16 additions & 15 deletions files/zh-tw/web/api/canvas_api/tutorial/compositing/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,11 @@ slug: Web/API/Canvas_API/Tutorial/Compositing
- `globalCompositeOperation = type`
- : type 字串可指定為以下 12 種合成設定之一，每一種合成設定均將套用到新繪製的圖形上。

See [compositing examples](/zh-TW/docs/Web/API/Canvas_API/Tutorial/Compositing/Example) for the code of the following examples.

{{EmbedLiveSample("Compositing_example", 750, 6750, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}}

## 裁剪路徑

![](canvas_clipping_path.png)裁剪路徑就像是一般畫布圖形繪圖，但就如同遮罩一樣，會蓋掉不需要的部分，如右圖所示。紅邊星星是我們的裁剪路徑，在路徑區域以外部分都不會出現在畫布上。
裁剪路徑就像是一般畫布圖形繪圖，但就如同遮罩一樣，會蓋掉不需要的部分，如右圖所示。紅邊星星是我們的裁剪路徑，在路徑區域以外部分都不會出現在畫布上。

![](canvas_clipping_path.png)

和上述 globalCompositeOperation 相比，可以發現 source-in 和 source-atop 這兩種構圖組合所達到的效果，和裁剪路徑類似，而其中最大差異在於裁剪路徑不需加入新圖形，消失的部分也不會出現在畫布上，所以，如果想要限定繪圖區域，裁剪路徑會是更理想的作法。

Expand All @@ -39,25 +37,28 @@ See [compositing examples](/zh-TW/docs/Web/API/Canvas_API/Tutorial/Compositing/E

```js
function draw() {
var ctx = document.getElementById("canvas").getContext("2d");
const ctx = document.getElementById("canvas").getContext("2d");
ctx.fillRect(0, 0, 150, 150);
ctx.translate(75, 75);

// Create a circular clipping path
// 建立圓形裁剪路徑
ctx.beginPath();
ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
ctx.clip();

// draw background
var lingrad = ctx.createLinearGradient(0, -75, 0, 75);
// 繪製背景
const lingrad = ctx.createLinearGradient(0, -75, 0, 75);
lingrad.addColorStop(0, "#232256");
lingrad.addColorStop(1, "#143778");

ctx.fillStyle = lingrad;
ctx.fillRect(-75, -75, 150, 150);

// draw stars
for (var j = 1; j < 50; j++) {
generateStars(ctx);
}

function generateStars(ctx) {
for (let j = 1; j < 50; j++) {
ctx.save();
ctx.fillStyle = "#fff";
ctx.translate(
Expand All @@ -73,9 +74,9 @@ function drawStar(ctx, r) {
ctx.save();
ctx.beginPath();
ctx.moveTo(r, 0);
for (var i = 0; i < 9; i++) {
for (let i = 0; i < 9; i++) {
ctx.rotate(Math.PI / 5);
if (i % 2 == 0) {
if (i % 2 === 0) {
ctx.lineTo((r / 0.525731) * 0.200811, 0);
} else {
ctx.lineTo(r, 0);
Expand All @@ -99,6 +100,6 @@ draw();

繪製裁剪路徑之後，所產生的所有圖形都只會出現在路徑以內，從後來繪製的漸層背景中可看出此特性。我們用自訂的 drawStar() 函數產生 50 個隨機散佈、大小不一的星星。這些星星同樣只會出現在裁剪路徑的範圍之內。

{{EmbedLiveSample("clip 範例", "180", "180", "canvas_clip.png")}}
{{EmbedLiveSample("clip 範例", "", "160")}}

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Transformations", "Web/Guide/HTML/Canvas_tutorial/Basic_animations")}}
{{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}
18 changes: 9 additions & 9 deletions files/zh-tw/web/api/canvas_api/tutorial/drawing_shapes/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ function draw() {

本例結果如下:

{{EmbedLiveSample("矩形範例", 160, 160, "canvas_rect.png")}}
{{EmbedLiveSample("矩形範例", 160, 160)}}

fillRect()函數畫出一個寬高都 100 pixels 的矩形，clearRect()函數清除中央 60 x 60 pixels 大的正方形區域，接著 strokeRect()在被清除區域內畫上一個 50 x 50 pixels 的矩形邊框。

Expand Down Expand Up @@ -111,7 +111,7 @@ function draw() {

結果如下:

{{EmbedLiveSample("畫一個三角形", 110, 110, "triangle.png")}}
{{EmbedLiveSample("畫一個三角形", 110, 110)}}

### 移動畫筆

Expand Down Expand Up @@ -153,7 +153,7 @@ function draw() {

結果如下:

{{EmbedLiveSample("移動畫筆", 160, 160, "canvas_smiley.png")}}
{{EmbedLiveSample("移動畫筆", 160, 160)}}

移除 moveTo() 便可以看到線條連結起來。

Expand Down Expand Up @@ -204,7 +204,7 @@ function draw() {

從呼叫 beginPath()起始一個新圖形路徑，然後用 moveTo()移到我們想要的起始點，然後再畫兩條線形成三角形的兩邊。

{{EmbedLiveSample("線條", 160, 160, "canvas_lineTo.png")}}
{{EmbedLiveSample("線條", 160, 160)}}

我們可以看到填滿(fill)三角形和勾勒(stroke)三角形的區別；當填滿時，圖形會自動閉合，不過勾勒則不會，所以如果沒有呼叫 closePaht()的話，只會畫出兩條線而非三角形。

Expand Down Expand Up @@ -264,9 +264,9 @@ function draw() {
}
```

{{EmbedLiveSample("弧形", 160, 210, "canvas_arc.png")}}
{{EmbedLiveSample("弧形", 160, 210)}}

### 貝茲曲線(Bezier curve)與二次曲線(quadratic curve)
### 貝茲曲線與二次曲線

二次與三次[貝茲曲線(Bézier curves)](http://en.wikipedia.org/wiki/B%C3%A9zier_curve)是另一種可用來構成複雜有機圖形的路徑。

Expand Down Expand Up @@ -313,7 +313,7 @@ function draw() {
}
```

{{EmbedLiveSample("二次貝茲曲線", 160, 160, "canvas_quadratic.png")}}
{{EmbedLiveSample("二次貝茲曲線", 160, 160)}}

#### 三次貝茲曲線

Expand Down Expand Up @@ -347,7 +347,7 @@ function draw() {
}
```

{{EmbedLiveSample("三次貝茲曲線", 160, 160, "canvas_bezier.png")}}
{{EmbedLiveSample("三次貝茲曲線", 160, 160)}}

### 矩形

Expand Down Expand Up @@ -511,7 +511,7 @@ function draw() {
}
```

{{EmbedLiveSample("Path2D_example", 130, 110, "path2d.png")}}
{{EmbedLiveSample("Path2D_example", 130, 110)}}

### 使用向量路徑 (SVG paths)

Expand Down
Binary file removed files/zh-tw/web/api/canvas_api/tutorial/transformations/canvas_rotate.png
View file
Open in desktop
Binary file not shown.
Binary file removed files/zh-tw/web/api/canvas_api/tutorial/transformations/canvas_scale.png
View file
Open in desktop
Binary file not shown.
Binary file removed files/zh-tw/web/api/canvas_api/tutorial/transformations/canvas_translate.png
View file
Open in desktop
Binary file not shown.
Loading
Loading