利用canvas绘制字体-创新互联
这篇文章主要为大家详细介绍了使用canvas标签绘制字体的代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
创新互联建站专注于企业营销型网站建设、网站重做改版、历下网站定制设计、自适应品牌网站建设、HTML5、成都商城网站开发、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为历下等各大城市提供网站开发制作服务。先看效果图
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标签绘制字体的方法了吗?动手试试吧。如果想了解更多相关内容,欢迎关注创新互联网站制作公司行业资讯频道!
创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。
网站名称:利用canvas绘制字体-创新互联
文章链接:http://hbruida.cn/article/ccsojs.html