利用canvas绘制字体
这篇文章主要为大家详细介绍了使用canvas标签绘制字体的代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
先看效果图
html结构
当前浏览器不支持canvas,请更换浏览器后再试
js脚本
_window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
context = canvas.getContext("2d");
context.font = "bold 40px Arial";
context.fillStyle = "#058";
context.fillText("欢迎学习",40,100);
context.lineWidth = 1;
context.strokeStyle = "#058";
context.strokeText("欢迎大家学习",40,200);
context.fillText("欢迎大家学习绘图",40,300,400);
context.strokeText("欢迎大家学习绘图",40,400,400);
var linearGrad = context.createLinearGradient(0,0,800,0);
linearGrad.addColorStop(0.0,'red');
linearGrad.addColorStop(0.25,'orange');
linearGrad.addColorStop(0.5,'yellow');
linearGrad.addColorStop(0.75,'green');
linearGrad.addColorStop(1.0,'purple');
context.fillStyle = linearGrad;
context.fillText("欢迎大家学习绘图sdfdsafsadfdsafdsafdsa",40,500);
var backgroundImage = new Image();
backgroundImage.src = "7f638e192b9079e6.jpg";
backgroundImage.onload = function(){
var pattern = context.createPattern(backgroundImage,"repeat");
context.fillStyle = pattern;
context.font = "bold 100px Arial";
context.fillText("Canvas!",40,650);
}
}
注意:7f638e192b9079e6.jpg可以替换为任意图片
看完上诉内容,你们掌握canvas标签绘制字体的方法了吗?动手试试吧。如果想了解更多相关内容,欢迎关注行业资讯频道!