离屏Canvas——制作水印图片

原创 2015年08月24日 15:01:05
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body style="background: black;">

    <canvas id="canvas" style="display:block;margin:0 auto;border:1px solid #aaa;">
        您的浏览器尚不支持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 auto;width:800px"/>

    <canvas id="watermark-canvas" style="display:none;margin:0 auto;border:1px solid #aaa;">
        您的浏览器尚不支持canvas
    </canvas>

    <script>
        var canvas = document.getElementById("canvas")
        var context = canvas.getContext("2d")
        var slider = document.getElementById("scale-range")

        var watermarkCanvas = document.getElementById("watermark-canvas")
        var watermarkContext = watermarkCanvas.getContext("2d")

        window.onload = function(){

            canvas.width = 1152
            canvas.height = 768

            var image = new Image()
            var scale = 1.0
            image.src = "img-lg.jpg"
            image.onload = function(){
                drawImage( image , scale )

                slider.onmousemove = function(){
                    scale = slider.value
                    drawImage( image , scale )
                }
            }

            //setup watermark canvas
            watermarkCanvas.width = 600
            watermarkCanvas.height = 100

            watermarkContext.font = "bold 50px Arial"
            watermarkContext.lineWidth = "1"
            watermarkContext.fillStyle = "rgba( 255 , 255 , 255 , 0.5 )"
            watermarkContext.textBaseline = "middle";
            watermarkContext.fillText( "HTML5自由者" , 20 , 50 )
        }

        function drawImage( image , scale ){

            imageWidth = 1152 * scale
            imageHeight = 768 * scale
            x = canvas.width /2 - imageWidth / 2
            y = canvas.height / 2 - imageHeight / 2

            context.clearRect( 0 , 0 , canvas.width , canvas.height )
            context.drawImage( image , x , y , imageWidth , imageHeight )
            context.drawImage( watermarkCanvas , canvas.width - watermarkCanvas.width ,
                                                  canvas.height - watermarkCanvas.height )
        }


    </script>
</body>
</html>



版权声明:本文为博主原创文章,未经博主允许不得转载。

html5 离屏canvas 的应用

离屏canvas在大多数的情况下是应用到html5 游戏中,但是最近接触到的一个项目是运用到绘制大量的图形上。 譬如有以下的需求,在一个固定的背景图上面绘制一个动态的时间。拿到这个需求,大部分搞过ht...
  • u012251421
  • u012251421
  • 2015年07月27日 15:20
  • 1802

离屏Canvas

离屏效果: 离屏非离屏并存效果 --> Image Clock body { backgro...
  • hb707934728
  • hb707934728
  • 2017年04月06日 10:43
  • 551

离屏Canvas——制作放大镜效果

您的浏览器尚不支持canvas var canvas = document.getElementById("canvas") ...
  • huangyibin628
  • huangyibin628
  • 2015年08月24日 14:57
  • 3229

canvas添加水印

html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> head> body style="backgr...
  • qq_17565743
  • qq_17565743
  • 2017年06月07日 21:57
  • 205

前端小程序——js+canvas 给图片添加水印

图片来自网络 市场上各种各样的图片处理器有很多,那么作为程序员的我们是不是应该自己做一个呢?那就从加水印开始吧 html: 点击添加水印 画完页面就是这个样子了...
  • gjq1993
  • gjq1993
  • 2017年03月03日 14:31
  • 2403

[前端] canvas进阶之图片缩放、水印及放大镜

一、拖动滑竿实现图片缩放要实现的效果: HTML布局: 您的浏览器尚不支持canvas ...
  • u010081689
  • u010081689
  • 2015年09月07日 22:12
  • 1104

用canvas给界面添加文字水印

Document asasas asasas asasas asasas asasas asasas asasas asasas asasas asasas asasas asas...
  • thundor
  • thundor
  • 2016年05月27日 14:43
  • 1479

[前端] canvas进阶之图片缩放、水印及放大镜

一、拖动滑竿实现图片缩放要实现的效果: HTML布局: 您的浏览器尚不支持canvas ...
  • u010081689
  • u010081689
  • 2015年09月07日 22:12
  • 1104

前端小程序——js+canvas 给图片添加水印

图片来自网络 市场上各种各样的图片处理器有很多,那么作为程序员的我们是不是应该自己做一个呢?那就从加水印开始吧 html: 点击添加水印 画完页面就是这个样子了...
  • gjq1993
  • gjq1993
  • 2017年03月03日 14:31
  • 2403

赵雅智_运用Bitmap和Canvas实现图片显示,缩小,旋转,水印

上一篇已经介绍了Android种Bitmap和Canvas的使用,下面我们来写一个具体实例 http://blog.csdn.net/zhaoyazhi2129/article/details/32...
  • zhaoyazhi2129
  • zhaoyazhi2129
  • 2014年06月18日 16:34
  • 4259
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:离屏Canvas——制作水印图片
举报原因:
原因补充:

(最多只允许输入30个字)