JS.Canvas：镂空文字

参考:

https://blog.csdn.net/weixin_29209805/article/details/112116441
https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API
https://developer.mozilla.org/en-US/docs/Web/API/Document/fonts
JS实现canvas图层
globalCompositeOperation
globalAlpha
https://www.runoob.com/tags/html-colorname.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>镂空文字</title>
<style>
canvas { border:1px solid gray; margin:0 auto; display:block; }
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const font = new FontFace("FZCCHJT", "url(方正超粗黑简体.ttf)");
document.fonts.add(font);
font.load();var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img1 = new Image();
img1.src = 'sea.webp';
img1.onload = function() {
document.fonts.ready.then(function () {canvas.width = img1.width;canvas.height = img1.height;//backgroundvar canvas1 = document.createElement('canvas');canvas1.width = img1.width;canvas1.height = img1.height;var ctx1 = canvas1.getContext('2d');  ctx1.drawImage(img1,0,0);//ctx1.globalCompositeOperation = "lighter";ctx1.globalAlpha = 0.8;ctx1.fillStyle = 'black';ctx1.fillRect(0, 0, canvas1.width, canvas1.height); var canvas2 = document.createElement('canvas');canvas2.width = img1.width;canvas2.height = img1.height;var ctx2 = canvas2.getContext('2d');ctx2.drawImage(img1,0,0);ctx2.globalCompositeOperation = "destination-in";ctx2.font = '400px FZCCHJT';ctx2.fillText('海', 0, 350);var canvas3 = document.createElement('canvas');canvas3.width = img1.width;canvas3.height = img1.height;var ctx3 = canvas3.getContext('2d');ctx3.drawImage(img1,0,0);ctx3.globalCompositeOperation = "destination-in";ctx3.font = '400px FZCCHJT';ctx3.fillText('浪', canvas3.width/2 + 100, 500);ctx.drawImage(canvas1, 0, 0);  ctx.drawImage(canvas2, 0, 0);ctx.drawImage(canvas3, 0, 0);
});
}
</script>
</body>
</html>

JS.Canvas：镂空文字相关推荐

html+js+显示文字时钟,JavaScript canvas实现文字时钟
本文实例为大家分享了canvas实现文字时钟的具体代码,供大家参考,具体内容如下先看看效果图代码 Document 您的浏览器不支持canvas var c=document.getElement ...
炫酷的canvas粒子文字js特效
下载地址一款HTML5 canvas特效,炫酷的canvas粒子文字特效,该素材呈现了由多彩的粒子形成文字的动画效果,可用作网页进入动画等,精简易用. dd:
微信小程序-canvas绘制文字实现自动换行
微信小程序-canvas绘制文字实现自动换行在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为我们只能设置文本的最大宽度,这就产生 ...
阿发你好java_191122_01 纯前端JS实现的文字验证码
纯前端JS实现的文字验证码作者:邵发本文是Java学习指南系列教程的官方配套文档.内容介绍一种基于JavaScript绘制的纯前端实现的验证码技术.本文附带项目源码及相关JAR包. 1. 验证码 ...
JS——canvas基础及其应用
JS--canvas及其应用一.canvas基础 1.canvas--画布: canvas本身没有外观,只是一个画板 IE9以前不支持 canvas不要使用css来定义大小,要直接使用自身的属性wi ...
html5绘制股票图形,股票数据分析(五):绘制股票k线图(js+canvas + Python + json)
本文介绍:利用 js+canvas 绘制股票k线图 HTML5 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过, 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来 ...
HTML5七夕情人节表白网页制作【canvas生日快乐文字烟花背景动画特效】HTML+CSS+JavaScript 生日快乐代码
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
JS canvas绘制进度条
JS canvas绘制进度条在前端开发中,我比较喜欢Cavans画布,通过Cavans可以绘制自己想要的东西,在早之前,我通过Canvas播放视频,绘制图片,绘制banner图等,复杂点可以用来做数 ...
three.js 带更新文字的旋转地球
2019独角兽企业重金招聘Python工程师标准>>> 查看旋转地球效果主要用到几个知识点 (1)显示文字是使用了three.js 的精灵(Sprite),精灵的文字方向始终面向相 ...

JS.Canvas：镂空文字

JS.Canvas：镂空文字相关推荐

最新文章

热门文章