文章目錄
- 前言
- 示例-圖像的縮放
- 在 Canvas 邊界之外繪制圖像
前言
在上節中讀者已經學會了如何使用 drawImage() 方法將一幅未經縮放的圖像繪制到 canvas 之中。現在我們就來看看如何用該方法在繪制圖像的時候進行縮放
示例-圖像的縮放
未縮放的圖像，顯示圖形原有大小。
縮放后的圖像，將圖形的寬高放到到和 canvas 大小一致。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><title>4-2-圖像的縮放</title><style>body {background: #eeeeee;}#canvas {background: #ffffff;margin-top: 5px;margin-left: 10px;-webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);-moz-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);border: 1px solid rgba(0, 0, 0, 0.2);}</style></head><body><div id="controls"><input id="scaleCheckbox" type="checkbox" />縮放圖片</div><canvas id="canvas" width="1000" height="600">canvas not supports</canvas><script>'use strict'let canvas = document.getElementById('canvas'),context = canvas.getContext('2d'),image = new Image(),scaleCheckbox = document.getElementById('scaleCheckbox')let drawImage = () => {context.clearRect(0, 0, canvas.width, canvas.height)if (scaleCheckbox.checked) {context.drawImage(image, 0, 0, canvas.width, canvas.height)} else {context.drawImage(image, 0, 0)}context.restore()}scaleCheckbox.onchange = (e) => {drawImage()}image.src = './waterfall.png'image.onload = () => {context.drawImage(image, 0, 0)}</script></body>
</html>
在 Canvas 邊界之外繪制圖像
圖像可以繪制在 canvas 之內，也可以通過指定坐標值將圖像繪制在它之外。在應用程序放大倍數大于 1.0 的情況下，就會把圖像的繪制點指定到 canvas 外面去。
如果你向 canvas 之中繪制的圖像有一部分會落在 canvas 的范圍之外，那么瀏覽器就會將 canvas 范圍外的那部分圖像忽略。
可以在 canvas 范圍之外進行繪制，這是一項重要的功能。我們把圖像繪制在 canvas 范圍外，并且通過平移 canvas 的坐標系來讓背景中的某一部分內容顯示在當前視窗范圍內。
示例：將縮放后的圖片繪制于Canvas中央
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>4-4-圖像的縮放</title><style>/* 設置頁面背景顏色 */body {background: rgba(100, 145, 250, 0.3);}/* 調整滑動條的對齊和大小 */#scaleSlider {vertical-align: 10px;width: 100px;margin-left: 90px;}/* 設置畫布的邊距、邊框和光標樣式 */#canvas {margin: 10px 20px 0px 20px;border: thin solid #aaa;cursor: crosshair;}/* 調整控制面板的邊距和內邊距 */#controls {margin-left: 15px;padding: 0;}/* 設置縮放比例顯示框的位置、大小和樣式 */#scaleOutput {position: absolute;width: 60px;height: 30px;margin-left: 10px;vertical-align: center;text-align: center;color: blue;font: 18px Arial;text-shadow: 2px 2px 4px rgba(100, 140, 250, 0.8);}</style></head><body><div id="controls"><div id="scaleOutput">1.0</div><input type="range" id="scaleSlider" min="1" max="3.0" step="0.1" value="1.0" /></div><canvas id="canvas" width="800" height="520"> canvas not supports </canvas><script>// 獲取HTML元素const canvas = document.getElementById('canvas'),context = canvas.getContext('2d'),scaleSlider = document.getElementById('scaleSlider'),scaleOutput = document.getElementById('scaleOutput'),MIN_SCALE = 1.0,MAX_SCALE = 3.0let scale = 1.0const image = new Image()// 繪制圖像的函數function drawImage() {const w = canvas.width,h = canvas.height,sw = w * scale,sh = h * scalecontext.clearRect(0, 0, w, h)context.drawImage(image, w / 2 - sw / 2, h / 2 - sh / 2, sw, sh)}// 更新縮放比例文本的函數function drawScaleText(value) {const text = parseFloat(value).toFixed(1)let percent = parseFloat(value - MIN_SCALE) / parseFloat(MAX_SCALE - MIN_SCALE)scaleOutput.textContent = textpercent = percent < 0.35 ? 0.35 : percentscaleOutput.style.fontSize = (percent * MAX_SCALE) / 1.5 + 'em'}// 滑動條的事件處理函數scaleSlider.onchange = (e) => {scale = e.target.valueif (scale < MIN_SCALE) {scale = MIN_SCALE} else if (scale > MAX_SCALE) {scale = MAX_SCALE}drawScaleText(scale)drawImage()}// 初始化畫布樣式context.fillStyle = 'rgba(100, 140, 250, 0.5)'context.strokeStyle = 'yellow'context.shadowColor = 'rgba(50, 50, 50, 1.0)'context.shadowOffsetX = 5context.shadowOffsetY = 5context.shadowBlur = 10// 設置圖像源image.src = 'waterfall.png'// 圖像加載完成后的事件處理函數image.onload = () => {drawImage()drawScaleText(scaleSlider.value)}</script></body>
</html>
![[網頁五子棋][用戶模塊]客戶端開發(登錄功能和注冊功能)](http://pic.xiahunao.cn/[網頁五子棋][用戶模塊]客戶端開發(登錄功能和注冊功能))
)
