add: linear gradient

xiuhonglee · Dec 18, 2018 · b82322e · b82322e
1 parent f83467a
commit b82322e
Show file tree

Hide file tree

Showing 7 changed files with 371 additions and 3 deletions.
diff --git a/docs/.vuepress/components/Canvas/d11.vue b/docs/.vuepress/components/Canvas/d11.vue
@@ -0,0 +1,103 @@
+<template>
+    <div class="wrap" style="relative">
+        <canvas ref="canvas" width="500" height="200"></canvas>
+        <div class="btn" @click="handleClick">{{btnText}}</div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            canvas: null,
+            ctx: null,
+            btnText: "清空"
+        };
+    },
+    mounted() {
+        this.canvas = this.$refs.canvas;
+        this.ctx = this.setupCanvas(this.canvas);
+        this.draw();
+    },
+
+    methods: {
+        setupCanvas(canvas) {
+            let dpr = window.devicePixelRatio || 1;
+            let rect = canvas.getBoundingClientRect();
+            canvas.width = rect.width * dpr;
+            canvas.height = rect.height * dpr;
+            let ctx = canvas.getContext("2d");
+            ctx.scale(dpr, dpr);
+            return ctx;
+        },
+        draw() {
+            this.ctx.lineWidth = 1;
+
+            this.ctx.beginPath();
+            this.ctx.strokeRect(20, 30, 100, 50);
+
+            this.ctx.beginPath();
+            this.ctx.save();
+            this.ctx.fillStyle = "#ffb53d";
+            this.ctx.fillRect(20, 120, 100, 50);
+            this.ctx.restore();
+
+            this.ctx.font = "12px serif";
+            this.ctx.fillText("ctx.rect(20, 30, 100, 50)", 140, 50);
+            this.ctx.fillText("ctx.stroke()", 140, 65);
+            this.ctx.fillText("或", 260, 58);
+            this.ctx.fillText("ctx.strokeRect(20, 30, 100, 50)", 290, 58);
+
+            this.ctx.fillText("ctx.rect(20, 120, 100, 50)", 140, 150);
+            this.ctx.fillText("ctx.fill()", 140, 165);
+            this.ctx.fillText("或", 260, 158);
+            this.ctx.fillText("ctx.fillRect(20, 120, 100, 50)", 290, 158);
+        },
+
+        clearRect() {
+            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        }, 
+
+        handleClick() {
+            if (this.btnText === "清空") {
+                this.clearRect();
+                this.btnText = "绘制";
+            } else {
+                
+                this.draw();
+                this.btnText = "清空";
+            }
+        }
+    }
+};
+</script>
+
+
+<style scoped>
+.wrap {
+    position: relative;
+    width: 500px;
+    height: 200px;
+    margin: 15px 0;
+}
+canvas {
+    width: 500px;
+    height: 200px;
+    box-shadow: 0 0 2px 3px #eee;
+}
+.btn {
+    position: absolute;
+    right: 15px;
+    bottom: 10px;
+    width: 60px;
+    height: 25px;
+    border-radius: 3px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    font-size: 12px;
+    cursor: pointer;
+    background-color: #ff5777;
+}
+</style>
diff --git a/docs/.vuepress/components/Canvas/d12.vue b/docs/.vuepress/components/Canvas/d12.vue
@@ -0,0 +1,90 @@
+<template>
+    <div class="wrap" style="relative">
+        <canvas ref="canvas" width="500" height="200"></canvas>
+        <div class="slidecontainer">
+            <span>opacity: {{opacity}}</span>
+            <input type="range" min="0" max="1" value="0.7" step="0.1" class="slider" id="myRange" v-model="opacity">
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            canvas: null,
+            ctx: null,
+            opacity: 0.7
+        };
+    },
+    mounted() {
+        this.canvas = this.$refs.canvas;
+        this.ctx = this.setupCanvas(this.canvas);
+        this.draw();
+    },
+
+    watch: {
+        opacity(newValue) {
+            this.clearRect();
+            this.draw();
+        }
+    },
+
+    methods: {
+        setupCanvas(canvas) {
+            let dpr = window.devicePixelRatio || 1;
+            let rect = canvas.getBoundingClientRect();
+            canvas.width = rect.width * dpr;
+            canvas.height = rect.height * dpr;
+            let ctx = canvas.getContext("2d");
+            ctx.scale(dpr, dpr);
+            return ctx;
+        },
+        draw() {
+            this.ctx.lineWidth = 1;
+
+            this.ctx.beginPath();
+            this.ctx.fillStyle = "#ff0000";
+            this.ctx.fillRect(120, 50, 100, 50);
+
+            this.ctx.beginPath();
+            this.ctx.save();
+            this.ctx.fillStyle = `rgba(255, 200, 0, ${this.opacity})`;
+            this.ctx.fillRect(180, 80, 100, 50);
+            this.ctx.restore();
+        },
+
+        clearRect() {
+            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        }
+    }
+};
+</script>
+
+
+<style scoped>
+.wrap {
+    position: relative;
+    width: 500px;
+    height: 200px;
+    margin: 15px 0;
+}
+canvas {
+    width: 500px;
+    height: 200px;
+    box-shadow: 0 0 2px 3px #eee;
+}
+.slidecontainer {
+    position: absolute;
+    right: 15px;
+    bottom: 30px;
+    width: 120px;
+    height: 30px;
+    outline: none;
+    opacity: 0.7;
+    appearance: none;
+}
+.slider:hover {
+  opacity: 1; /* Fully shown on mouse-over */
+}
+</style>
diff --git a/docs/.vuepress/components/Canvas/d13.vue b/docs/.vuepress/components/Canvas/d13.vue
@@ -0,0 +1,153 @@
+<template>
+    <div class="wrap" style="relative">
+        <canvas ref="canvas" width="500" height="200"></canvas>
+        <div class="rangeGroup">
+            <div class="axPoint" v-if="canvas">
+                <span>ax:</span>
+                <input type="range" min="0" :max="canvas.width / 2" step="1" v-model="ax">
+            </div>
+            <div class="ayPoint" v-if="canvas">
+                <span>ay:</span>
+                <input type="range" min="0" :max="canvas.height / 2" step="1" v-model="ay">
+            </div>
+            <div class="bxPoint" v-if="canvas">
+                <span>bx:</span>
+                <input type="range" min="0" :max="canvas.width / 2" step="1" v-model="bx">
+            </div>
+            <div class="byPoint" v-if="canvas">
+                <span>by:</span>
+                <input type="range" min="0" :max="canvas.height / 2" step="1" v-model="by">
+            </div>
+        </div>
+        <div class="btn" @click="handleClick">重置</div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            canvas: null,
+            ctx: null,
+            gradient: null,
+            ax: 0,
+            ay: 0,
+            bx: 0,
+            by: 0
+        };
+    },
+    mounted() {
+        this.canvas = this.$refs.canvas;
+        this.ctx = this.setupCanvas(this.canvas);
+
+        this.initAB();
+        this.draw();
+    },
+
+    watch: {
+        ax() {
+            this.redraw();
+        },
+        ay() {
+            this.redraw();
+        },
+        bx() {
+            this.redraw();
+        },
+        by() {
+            this.redraw();
+        }
+    },
+
+    methods: {
+        initAB() {
+            this.ax = 0;
+            this.ay = this.canvas.height / 4;
+            this.bx = this.canvas.width / 2;
+            this.by = this.canvas.height / 4;
+        },
+        handleClick() {
+            this.initAB();
+        },
+        setupCanvas(canvas) {
+            let dpr = window.devicePixelRatio || 1;
+            let rect = canvas.getBoundingClientRect();
+            canvas.width = rect.width * dpr;
+            canvas.height = rect.height * dpr;
+            let ctx = canvas.getContext("2d");
+            ctx.scale(dpr, dpr);
+            return ctx;
+        },
+
+        draw() {
+            this.gradient = this.ctx.createLinearGradient(
+                this.ax,
+                this.ay,
+                this.bx,
+                this.by
+            );
+            this.gradient.addColorStop(0, "blue");
+            this.gradient.addColorStop(0.25, "white");
+            this.gradient.addColorStop(0.5, "purple");
+            this.gradient.addColorStop(0.75, "red");
+            this.gradient.addColorStop(1, "yellow");
+            this.ctx.fillStyle = this.gradient;
+            this.ctx.fillRect(30, 30, 280, 140);
+
+            this.ctx.save();
+            this.ctx.lineWidth = 1;
+            this.ctx.strokeStyle = "cyan";
+            this.ctx.beginPath();
+            this.ctx.moveTo(this.ax, this.ay);
+            this.ctx.lineTo(this.bx, this.by);
+            this.ctx.stroke();
+            this.ctx.restore();
+        },
+
+        redraw() {
+            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+            this.draw();
+        }
+    }
+};
+</script>
+
+
+<style scoped>
+.wrap {
+    position: relative;
+    width: 500px;
+    height: 200px;
+    margin: 15px 0;
+}
+canvas {
+    width: 500px;
+    height: 200px;
+    box-shadow: 0 0 2px 3px #eee;
+}
+
+.rangeGroup {
+    position: absolute;
+    right: 15px;
+    top: 30px;
+}
+
+.bxPoint {
+    margin-top: 30px;
+}
+.btn {
+    position: absolute;
+    right: 15px;
+    bottom: 10px;
+    width: 60px;
+    height: 25px;
+    border-radius: 3px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    font-size: 12px;
+    cursor: pointer;
+    background-color: #ff5777;
+}
+</style>
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -61,7 +61,7 @@ module.exports = {
         }
         ],
         sidebar: {
-            '/Canvas/': ['d01', 'd02', 'd03'],
+            '/Canvas/': ['d01', 'd02', 'd03', 'd04'],
             '/CSS3/': ['c02', 'c03', 'c04', 'c05'],
             '/SVG/': ['s01', 's01-01', 's01-02', 's02', 's03', 's04', 's05', 's06', 's07'],
             '/Nginx/': ['n01', 'n02', 'n03', 'n04', 'n05'],

diff --git a/docs/.vuepress/dist b/docs/.vuepress/dist
diff --git a/docs/Canvas/d03.md b/docs/Canvas/d03.md
@@ -34,7 +34,7 @@ function setupCanvas(canvas) {
 
 ## 2. 一像素问题
 
-上例中，在`dpr=1`的屏幕上显示，细心观察会发现，左侧矩形框的宽度并不是**1像素**(实际上为2像素)。这和`canvas`渲染原理有关，参考这里[](http://usefulangle.com/post/17/html5-canvas-drawing-1px-crisp-straight-lines)。解决方法是将绘制起点调整`+/-0.5`像素。
+上例中，在`dpr=1`的屏幕上显示，细心观察会发现，左侧矩形框的宽度并不是**1像素**(实际上为2像素)。这和`canvas`渲染原理有关，参考这里[](http://usefulangle.com/post/17/html5-canvas-drawing-1px-crisp-straight-lines)。解决方法是将绘制点调整`+/-0.5`像素。
 
 <Canvas-d10/>
 

diff --git a/docs/Canvas/d04.md b/docs/Canvas/d04.md
@@ -0,0 +1,22 @@
+---
+title: 图形绘制1
+sidebarDepth: 2
+---
+
+## 1. 绘制矩形
+
+* 语法如图示例：
+
+<Canvas-d11/>
+
+### 1.1 透明度
+
+* `fillStyle = rgba(r, g, b, alpha)`
+
+<Canvas-d12/>
+
+### 1.2 渐变
+
+渐变分为**线性渐变(`linear gradients`)**和**放射性渐变(`radial gradients`)**。下面示例中青色线段为线性渐变参考线，渐变色将以此条线段为基础进行渐变，`A(ax, ay)`为起点，`B(bx, by)`为终点。
+
+<Canvas-d13/>