<!DOCTYPE html>
<html>
<title>图文混排</title>
<body>
<canvas id="myCanvas" width="800px" height="600px" style="border:1px solid #030303"></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "tu2.webp",width="350px",height="600px";
img.onload = function() {
ctx.drawImage(img, 0, 0,350,600);
}
ctx.fillStyle="yellow";
ctx.fillRect(0,0,canvas.width,canvas.height)
ctx.font = "40px 微软雅黑";
var grd=ctx.createLinearGradient(0,0,canvas.width,0);
grd.addColorStop("1.0","blue");
// 应用渐变
ctx.fillStyle=grd;
ctx.fillText("小朋友观看长颈鹿",400,100,300,500);
ctx.font = "60px 微软雅黑";
ctx.fillText("大家很开心!",400,200,300,500);
</script>
</html>
本文展示了如何在HTML页面中使用CanvasAPI进行图文混排，包括加载图片、创建渐变并应用到文本上，以达到动态效果。
扫一扫
2186
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
