canvas笔记-canvas加载图片及放缩及加水印(两canvas同时使用)
生活随笔
收集整理的這篇文章主要介紹了
canvas笔记-canvas加载图片及放缩及加水印(两canvas同时使用)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
首先是圖片放縮
程序運行截圖如下：
拉動滑動條：
源碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body style="background: black"><canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">當前瀏覽器不支持canvas </canvas> <input type="range" id="scale-range" min="0.5" max="3.0" step="0.01" value="1.0" style="display: block; margin: 20px; width: 800px" /><script>let canvas = document.getElementById("canvas");let context = canvas.getContext("2d");let image = new Image();let slider = document.getElementById("scale-range");window.onload = function(){canvas.width = 1152;canvas.height = 768;let scale = slider.value;image.src = "img/bg2.jpg";image.onload = function() {// context.drawImage(image, 50, 50);// context.drawImage(image, 0, 0, canvas.width, canvas.height);// context.drawImage(image, 600, 200, 400, 400, 200, 200, 400, 400);slider.onmousemove = function(){scale = slider.value;drawImageByScale(scale);}}}function drawImageByScale(scale){let imageWidth = 1152 * scale;let imageHeight = 768 * scale;let dx = canvas.width / 2 - imageWidth / 2;let dy = canvas.height / 2 -imageHeight / 2;context.clearRect(0, 0, canvas.width, canvas.height);context.drawImage(image, dx, dy, imageWidth, imageHeight);}</script></body> </html>?
下面是水印，程序運行截圖如下：
源碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body style="background: black"><canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">當前瀏覽器不支持canvas </canvas> <!--<canvas id="watermark-canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">--><!--當前瀏覽器不支持canvas--> <!--</canvas>--><canvas id="watermark-canvas" style="display: none; margin: 0 auto; border: 1px solid #aaa">當前瀏覽器不支持canvas </canvas><script>let canvas = document.getElementById("canvas");let context = canvas.getContext("2d");let image = new Image();let watermarkCanvas = document.getElementById("watermark-canvas");let watermarkContext = watermarkCanvas.getContext("2d");window.onload = function(){canvas.width = 1152;canvas.height = 768;image.src = "img/bg2.jpg";image.onload = function() {drawImage(image);}watermarkCanvas.width = 600;watermarkCanvas.height = 100;watermarkContext.font = "bold 50px Arial";watermarkContext.lineWidth = 1;watermarkContext.fillStyle = "rgba(255, 255, 255)";watermarkContext.textBaseline = "middle";watermarkContext.fillText("ABCD中文!@E#$#", 20, 50);}function drawImage(image){let imageWidth = 1152;let imageHeight = 768;let dx = canvas.width / 2 - imageWidth / 2;let dy = canvas.height / 2 -imageHeight / 2;context.clearRect(0, 0, canvas.width, canvas.height);context.drawImage(image, dx, dy, imageWidth, imageHeight);context.drawImage(watermarkCanvas, canvas.width - watermarkCanvas.width, canvas.height - watermarkCanvas.height);}</script></body> </html>?
?
總結
以上是生活随笔為你收集整理的canvas笔记-canvas加载图片及放缩及加水印(两canvas同时使用)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C++笔记-VS2015加载Live2D
- 下一篇： MySQL笔记-binlog理论及bin