【实例】html-canvas中实现图片的放大

来源：互联网发布：萨龙网络编辑：程序博客网时间：2024/06/16 00:42
摘自《HTML5 Canvas和性技术：图形、动画与游戏开发》
在线演示
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">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 #aaaaaa;cursor: crosshair;}#controls {margin-left: 15px;padding: 0;}#scaleOutput {position: absolute;width: 60px;height: 30px;margin-left: 10px;vertical-align: center;text-align: ccenter;color: blue;font: 18px arial;text-shadow: 2px 2px 4px rgba(100, 140, 250, 0.8);}</style></head><body><div id="controls"><output id="scaleOutput">1.0</output><input id="scaleSlider" type="range" min="1" max="3.0" step="0.01" value="1.0"></div><canvas id="canvas" width="1200" height="600"></canvas></body><script type="text/javascript">var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");var image = new Image();var scaleSlider = document.getElementById("scaleSlider");var scaleOutput = document.getElementById("scaleOutput");//比例值var scale = 1.0;//最小比例var MINIMUM_SCALE = 1.0;//最大比例var MAXIMUN_SCALE = 3.0;function drawImage() {var w = canvas.width;var h = canvas.height;//缩放后的宽度var sw = w * scale;//缩放后的高度var sh = h * scale;context.clearRect(0, 0, canvas.width, canvas.height);//关键点，参数一：当前图像对象不变//参数二：新的图像的起始坐标X，咱们可以想象一个按中心点拉大的图，和原始图，原始图的(0,0)坐标实际上是//拉大的图的长度减去原始图的长度的差值除以二，最好画在纸上就知道为什么要除以二了//参数三与之类似，后两个参数是context.drawImage(image, -sw/2+ w/2, -sh/2 + h/2, sw, sh);}function drawScaleText(value) {//使用toFixed保证有两个小数位var text = parseFloat(value).toFixed(2);//换算，可以说是还需要显示百分之几的内容var percent = parseFloat(value - MINIMUM_SCALE) /parseFloat(MAXIMUN_SCALE - MINIMUM_SCALE);scaleOutput.textContent = text;//最小不能低于0.35percent = percent < 0.35 ? 0.35 : percent;//字号也跟着一起改变scaleOutput.style.fontSize = percent * MAXIMUN_SCALE / 1.5 + "em";}scaleSlider.onchange = function(e) {//当前滑块的值scale = e.target.value;//保证不能太大或者太小if(scale < MINIMUM_SCALE) {scale = MINIMUM_SCALE;} else if(scale > MAXIMUN_SCALE) {scale = MAXIMUN_SCALE}drawScaleText(scale);drawImage();};context.fillStyle = "cornflowerblue";context.strokeStyle = "yellow";context.shadowColor="rgba(50, 50, 50, 1.0)";context.shadowOffsetX = 5;context.shadowOffsetY = 5;context.shadowBlur = 10;image.src = "48091305.jpg";image.onload = function(e) {drawImage();drawScaleText(scaleSlider.value);}</script></html>
0 0