canvas水印（原创）

Html

Css

var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d")
var image = new Image()

function drawImageByScale(scale) {
    var imageWidth = 500 * scale
    var imageHeight = 500 * 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)
}
window.onload = function() {
    canvas.width = 500
    canvas.height = 500
    image.src = "http://www.jq22.com/img/cs/500x500-2.png"
    image.onload = function() {
        drawImageByScale(1)

// 设置水印canvas
        //setup watermark canvas
        watermarkCanvas.width = 300
        watermarkCanvas.height = 100

var watermarkContext = watermarkCanvas.getContext("2d")

watermarkContext.font = "bold 20px Arial"
        watermarkContext.lineWidth = "1"
        watermarkContext.fillStyle = "rgba( 255 , 255 , 255 , 0.5 )"
        watermarkContext.textBaseline = "middle";
        watermarkContext.fillText("== 水印 ==", 20, 50)

// 然后把该水印canvas画在图片canvas上就行
        // 比如这样来添加
        context.drawImage(watermarkCanvas, canvas.width - watermarkCanvas.width, canvas.height - watermarkCanvas.height)

}
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

canvas水印（原创）

代码描述：canvas在图片上绘制水印效果

准备两个canvas一个用来绘制图片一个用来写灰色的水印字体将第二个有水印字体的画布绘制到第一个画布上
然后把该水印canvas画在图片canvas上就行
比如这样来添加
context.drawimage(watermarkcanvas, canvas.width - watermarkcanvas.width, canvas.height - watermarkcanvas.height)

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

culiuxiang

相关代码

canvas水印（原创）

最新