4.3_水印的绘制

来源：互联网发布：阿里云带宽价格编辑：程序博客网时间：2024/06/05 20:52
4.3_水印的绘制

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>水印的绘制</title>        <style>            body{                background: rgba(100,145,250,0.3);            }            #scaleSlider{                width: 100px;                margin-left: 90px;                vertical-align: 10px;            }            #canvas{                margin: 10px 20px 0px 20px;                border: thin solid #aaa;                cursor: crosshair;            }            #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">            <output id="scaleOutput">1.0</output>            <input id="scaleSlider" type="range" min="1" max="3" step="0.01" value="1.0" />        </div>        <canvas id="canvas" width="800" height="520"></canvas>    </body>    <script>        var canvas = document.getElementById('canvas');        var context = canvas.getContext('2d');        var image = new Image();        var scalesSlider = document.getElementById('scaleSlider');        var scaleOutput = document.getElementById('scaleOutput');        var scale = 1.0;        var minimum = 1;        var maximum = 3;        //初始化        context.fillStyle = 'cornflowerblue';        context.strokeStyle = 'yellow';        context.shadowColor = 'rgba(50,50,50,1.0)';        context.shadowOffsetX = 5;        context.shadowOffsetY = 5;        context.shadowBlur = 10;        scaleOutput.style.fontSize = '0.7em';        image.src='img/waterfall.jpg';        image.onload = function(){            context.drawImage(image,0,0,canvas.width,canvas.height);            drawWatermark();            drawScaleText(scale);        }        //事件控制器        scalesSlider.onchange = function(e){            scale = e.target.value;            if(scale<minimum) scale = minimum;            if(scale>maximum) scale = maximum;            drawScaled();            drawScaleText(scale);        }        //先将之前放大的的图像还原        function drawScaled(){            var w = canvas.width;            var h = canvas.height;            var sw = w*scale;            var sh = h*scale;            context.clearRect(0,0,w,h);            //将放大的还原            context.drawImage(image,0,0,w,h);            drawWatermark();            //将新的放大的            context.drawImage(canvas,0,0,w,h,-sw/2+w/2,-sh/2+h/2,sw,sh);        }        //绘制缩放倍数的文字        function drawScaleText(value){            var text = parseFloat(value).toFixed(2);            var percent = parseFloat(value-minimum)/parseFloat(maximum-minimum);            scaleOutput.innerText = text;            percent = percent<0.35? 0.35:percent;            scaleOutput.style.fontSize = percent*maximum/1.5 +'em';        }        //绘制水印        function drawWatermark(){            var lineOne = 'Copyright';            var lineTwo = 'Acme Inc';            var textMetrics;//文字矩阵            var fontSize = 128;            context.save();            context.font = fontSize +'px Arial';            context.globalAlpha = 0.6;            //改变原点            context.translate(canvas.width/2,canvas.height/2-fontSize/2);            textMetrics = context.measureText(lineOne).width;            context.fillText(lineOne,-textMetrics/2,0);            context.strokeText(lineOne,-textMetrics/2,0);            textMetrics = context.measureText(lineTwo).width;            context.fillText(lineTwo,-textMetrics/2,fontSize);            context.strokeText(lineTwo,-textMetrics/2,fontSize);            context.restore();        }    </script></html>
0 0