nohapa
  • 累计撰写 19 篇文章
  • 累计收到 0 条评论

使用html-canvas为图片添加粉笔等特效(自定义字体+粉笔纹理)

nohapa
2020-10-29 / 0 评论 / 60 阅读 / 正在检测是否收录...
利用html-canvas实现粉笔特效等等

请看如下效果

粉笔特效

DIY斗图-粉笔字表白

实现步骤描述

1、需要两张图片,一张最上面的展示用的爱心图片,一张最下面作为粉笔纹理的图片。
2、使用canvas将文字fillText写在图片上。并且可以自定义字体、内容、颜色、大小和位置等等。
3、字体设置为白色后,发现这样只会在图片上显示纯白色的文字,达不到粉笔的效果。

这里就要用到HTML canvas globalCompositeOperation 属性

值 描述
xor 使用异或操作对源图像与目标图像进行组合。

xor

由上图可以看出使用xor可以去除重叠部分(透明化)

4、获取到去重的图片后(也就是字体部分已经透明化了),清除画布,在底层画上纹理图,再把去重的图片画上。最后就可以得到最上面那张图的效果了。当然你也可以设置不同的纹理图,实现不同的效果。

代码实现
var img = new Image();
img.src = $('#local').val();//爱心图片
img.onload;
var imgsss = new Image();
var btn = document.getElementById('submit');
var screenBox = document.getElementById('screen-box');
var newImg = document.createElement("img");
btn.onclick = function (event) {
    var fenbicolor = $("#color").val();
    var crayon = new Image();
    crayon.src = "/image/fenbi.jpg";//粉笔纹理图片
    crayon.onload=function(canvas) {
        screenBox.innerHTML = '';
        var name1 = $('#name1').val();//文字内容
        var canv = document.getElementById("myCanvas");//画布
        var ctx = canv.getContext("2d");
        canv.width = img.width;
        canv.height = img.height;
        ctx.drawImage(img, 0, 0, img.width, img.height);
        setName(ctx);//设置文字格式等(透明化处理)
        var dataUrl = canv.toDataURL('image/png', 0.6);//生成base64位图片
        ctx.clearRect(0,0,img.width,img.height);//清除画布
        imgsss.src = dataUrl;
        imgsss.onload = function (canvas) {
            ctx.drawImage(crayon, 0, 0, imgsss.width, imgsss.height);//先画纹理图片
            ctx.drawImage(imgsss, 0, 0, imgsss.width, imgsss.height);//在画生成的文字透明图
            //这样透明文字就有粉笔的纹理了
            //重点就是context.globalCompositeOperation = "xor";
            dataUrl = canv.toDataURL('image/png', 0.6);
            newImg.src = dataUrl;//展示。。。
            newImg.className = "responsive-img";
            screenBox.innerHTML = '';
            screenBox.appendChild(newImg);
        }
        $('#modal1').modal('open');

        function setName(context) {
            context.font = "100px 行者笔记简";//文字大小、自定义字体
            context.textAlign = "center";//居中处理
            //重合透明
            context.globalCompositeOperation = "xor";//xor去重处理
            context.fillText(name1, canv.width / 2, 160);//文字定位
            context.stroke();
            context.globalCompositeOperation = "source-over";//恢复默认
        }
    }

}
0

评论 (0)

取消