4.4_离屏Canvas

最新推荐文章于 2024-03-19 14:44:54 发布

信封中的阳光

最新推荐文章于 2024-03-19 14:44:54 发布

阅读量878

点赞数

分类专栏： HTML5_CANVAS练习案例

本文链接：https://blog.csdn.net/jun_sun_shine/article/details/71722210

版权

HTML5_CANVAS练习案例专栏收录该内容

81 篇文章 1 订阅

订阅专栏

4.4_离屏Canvas

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>离屏Canvas</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');

        //离屏canvas
        var offscreenCanvas = document.createElement('canvas');
        var offscreenContext = offscreenCanvas.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;

        //初始化

        scaleOutput.style.fontSize = '0.7em';

        offscreenCanvas.width = canvas.width;
        offscreenCanvas.height = canvas.height;

        image.src='img/waterfall.jpg';

        image.onload = function(){
            context.drawImage(image,0,0,canvas.width,canvas.height);

            offscreenContext.drawImage(image,0,0,offscreenCanvas.width,offscreenCanvas.height);

            drawWatermark(context);
            drawWatermark(offscreenContext);
            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.drawImage(offscreenCanvas,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(context){

            var lineOne = 'Copyright';
            var lineTwo = 'Acme Inc';
            var textMetrics;//文字矩阵
            var fontSize = 128;

            context.save();
            context.fillStyle = 'cornflowerblue';
            context.strokeStyle = 'yellow';

            context.shadowColor = 'rgba(50,50,50,1.0)';
            context.shadowOffsetX = 5;
            context.shadowOffsetY = 5;
            context.shadowBlur = 10;
            context.globalAlpha = 0.6;
            context.font = fontSize +'px arial';


            context.translate(context.canvas.width/2,context.canvas.height/2);

            textMetrics  = context.measureText(lineOne);
            context.fillText(lineOne,-textMetrics.width/2,0);
            context.strokeText(lineOne,-textMetrics.width/2,0);

            textMetrics  = context.measureText(lineTwo);
            context.fillText(lineTwo,-textMetrics.width/2,fontSize);
            context.strokeText(lineTwo,-textMetrics.width/2,fontSize);

            context.restore();
        }
    </script>   
</html>

信封中的阳光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
4.4_离屏Canvas

4.4_离屏Canvas<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>离屏Canvas</title> <style> body{ background: rgba(100,145,250,0.3);
复制链接

扫一扫