diff --git a/UI/JsCanvas/README_zh.md b/UI/JsCanvas/README_zh.md index 588795ee9fea721ffd25f83a7402260b86c72f8f..e4a398d78e47088c88961dee970fcce8df188a94 100644 --- a/UI/JsCanvas/README_zh.md +++ b/UI/JsCanvas/README_zh.md @@ -16,7 +16,15 @@ 5.点击“水平对齐”按钮，在画布上绘制文本水平对齐的方式。 -6.点击“清除”按钮，清除画布上所有绘制的内容。 +6.点击“图片”按钮，在画布上绘制一张图片。 + +7.点击“径向渐变”按钮，在画布上绘制径向渐变的颜色。 + +8.点击“线性渐变”按钮，在画布上绘制线性渐变的颜色。 + +9.点击“滤镜”按钮，在画布上绘制多种不同滤镜处理下的效果。 + +10.点击“清除”按钮，清除画布上所有绘制的内容。 ### 约束与限制 diff --git a/UI/JsCanvas/entry/src/main/js/default/common/images/ai.png b/UI/JsCanvas/entry/src/main/js/default/common/images/ai.png new file mode 100644 index 0000000000000000000000000000000000000000..33bd888c99df3ac4cd9c486702cec5fc9c68db27 Binary files /dev/null and b/UI/JsCanvas/entry/src/main/js/default/common/images/ai.png differ diff --git a/UI/JsCanvas/entry/src/main/js/default/common/images/like_yellow.png b/UI/JsCanvas/entry/src/main/js/default/common/images/like_yellow.png new file mode 100644 index 0000000000000000000000000000000000000000..751b6f436ad9a3aafa16aa53b148cd6def0c1282 Binary files /dev/null and b/UI/JsCanvas/entry/src/main/js/default/common/images/like_yellow.png differ diff --git a/UI/JsCanvas/entry/src/main/js/default/i18n/en-US.json b/UI/JsCanvas/entry/src/main/js/default/i18n/en-US.json index aa6bc7253fd5496aef9f69698ad137bfa238206c..f1c4179e9d7858393f0831d92d52ea4fc31cb0c8 100644 --- a/UI/JsCanvas/entry/src/main/js/default/i18n/en-US.json +++ b/UI/JsCanvas/entry/src/main/js/default/i18n/en-US.json @@ -5,6 +5,10 @@ "close": "close", "bezierCurve": "bezierCurve", "textBaseline": "textBaseline", + "image": "image", + "linearGradient": "linearGradient", + "radialGradient": "radialGradient", + "filter": "filter", "delete": "delete" } } \ No newline at end of file diff --git a/UI/JsCanvas/entry/src/main/js/default/i18n/zh-CN.json b/UI/JsCanvas/entry/src/main/js/default/i18n/zh-CN.json index e34a163a0ebbbb4910987e4553bb6fad48480e50..b14bd39a1b59cfe3002fa6a4dcc305d77d7f8d35 100644 --- a/UI/JsCanvas/entry/src/main/js/default/i18n/zh-CN.json +++ b/UI/JsCanvas/entry/src/main/js/default/i18n/zh-CN.json @@ -5,6 +5,10 @@ "close": "封闭", "bezierCurve": "贝赛尔曲线", "textBaseline": "水平对齐", + "image": "图片", + "linearGradient": "线性渐变", + "radialGradient": "径向渐变", + "filter": "滤镜", "delete": "清除" } } \ No newline at end of file diff --git a/UI/JsCanvas/entry/src/main/js/default/pages/index/index.css b/UI/JsCanvas/entry/src/main/js/default/pages/index/index.css index a0f5d4cd6a9b40c50384054984274fd407d36a31..199ea8fe2f9460ac09b38d6f720a6e1f70e8a54b 100644 --- a/UI/JsCanvas/entry/src/main/js/default/pages/index/index.css +++ b/UI/JsCanvas/entry/src/main/js/default/pages/index/index.css @@ -12,28 +12,46 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +.container-div { + width: 100%; + flex-direction: column; + align-items: center; + align-self: center; +} .container { flex-direction: column; - justify-content: space-around; align-items: center; + align-self: center; + flex-wrap: wrap; } -.title { +.button-div { + flex-direction: column; + justify-content: center; + align-items: center; + width: 300px; +} + + +.canvas { width: 300px; height: 300px; + margin-top: 20px; background-color: aqua; } .div-input { - margin-top: 10px; + width: 100%; + margin: 10px; flex-direction: row; - justify-content: space-around; + justify-content: center; align-items: center; } .canvas-input { - width: 100px; + width: 150px; height: 48px; + margin-left: 10px; font-size: 16px; } \ No newline at end of file diff --git a/UI/JsCanvas/entry/src/main/js/default/pages/index/index.hml b/UI/JsCanvas/entry/src/main/js/default/pages/index/index.hml index 71d3ba568e9e56bc1e530e2e45886ca45c3e0a48..ec7fc6f4e2608a32c942e186d882dcd3f1efa5dd 100644 --- a/UI/JsCanvas/entry/src/main/js/default/pages/index/index.hml +++ b/UI/JsCanvas/entry/src/main/js/default/pages/index/index.hml @@ -12,19 +12,30 @@ See the License for the specific language governing permissions and limitations under the License. --> - +
- -
- - -
-
- - -
-
- - + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
diff --git a/UI/JsCanvas/entry/src/main/js/default/pages/index/index.js b/UI/JsCanvas/entry/src/main/js/default/pages/index/index.js index 672470fde140e3dd9883333b7d5e826f12d1635a..f97ae64496988d81ba1645be57e138877d65fd83 100644 --- a/UI/JsCanvas/entry/src/main/js/default/pages/index/index.js +++ b/UI/JsCanvas/entry/src/main/js/default/pages/index/index.js @@ -18,7 +18,21 @@ export default { ctx: null }, onShow() { - this.ctx = this.$refs.canvas.getContext('2d'); + const cav = this.$refs.canvas; + this.ctx = cav.getContext('2d'); + }, + imageClick() { + this.ctx.clearRect(0, 0, 300, 300); + var ctx1 = this.$element('drawImage').getContext('2d'); + var img = new Image(); + img.src = 'common/images/like_yellow.png'; + img.onload = function () { + console.log('Image load success'); + ctx1.drawImage(img, 50, 50, 200, 200); + }; + img.onerror = function () { + console.log('Image load fail'); + }; }, handleClick() { this.ctx.beginPath(); @@ -68,5 +82,59 @@ export default { this.ctx.fillText('Middle', 125, 220); this.ctx.textBaseline = 'alphabetic'; this.ctx.fillText('Alphabetic', 195, 220); + }, + offScreen() { + var offscreen = new OffscreenCanvas(360, 500); + var offCanvas2 = offscreen.getContext("2d"); + var img = new Image(); + img.src = 'common/images/ai.png'; + offCanvas2.drawImage(img, 0, 0, 100, 100); + offCanvas2.filter = 'blur(5px)'; + offCanvas2.drawImage(img, 100, 0, 100, 100); + + offCanvas2.filter = 'grayscale(50%)'; + offCanvas2.drawImage(img, 200, 0, 100, 100); + + offCanvas2.filter = 'hue-rotate(90deg)'; + offCanvas2.drawImage(img, 0, 100, 100, 100); + + offCanvas2.filter = 'invert(100%)'; + offCanvas2.drawImage(img, 100, 100, 100, 100); + + offCanvas2.filter = 'drop-shadow(8px 8px 10px green)'; + offCanvas2.drawImage(img, 200, 100, 100, 100); + + offCanvas2.filter = 'brightness(0.4)'; + offCanvas2.drawImage(img, 0, 200, 100, 100); + + offCanvas2.filter = 'opacity(25%)'; + offCanvas2.drawImage(img, 100, 200, 100, 100); + + offCanvas2.filter = 'saturate(30%)'; + offCanvas2.drawImage(img, 200, 200, 100, 100); + + offCanvas2.filter = 'sepia(60%)'; + offCanvas2.drawImage(img, 0, 300, 100, 100); + + offCanvas2.filter = 'contrast(200%)'; + offCanvas2.drawImage(img, 100, 300, 100, 100); + var bitmap = offscreen.transferToImageBitmap(); + this.ctx.transferFromImageBitmap(bitmap); + }, + linearGradient() { + var gradient = this.ctx.createLinearGradient(50, 0, 300, 100); + gradient.addColorStop(0.0, 'red'); + gradient.addColorStop(0.5, 'white'); + gradient.addColorStop(1.0, 'green'); + this.ctx.fillStyle = gradient; + this.ctx.fillRect(0, 0, 500, 500); + }, + radialGradient() { + var gradient = this.ctx.createRadialGradient(150, 150, 50, 150, 150, 150); + gradient.addColorStop(0.0, 'red'); + gradient.addColorStop(0.5, 'white'); + gradient.addColorStop(1.0, 'green'); + this.ctx.fillStyle = gradient; + this.ctx.fillRect(0, 0, 500, 500); } }