HTML5 canvas基础制图之文本3D渲染
日期：2021-02-24 类型：科技新闻 我要分享
关键词：h5互动游戏，微信h5怎么制作，h5转盘抽奖，h5测试制作，凡科H5
与文字3D渲染相关的关键有3个特性和3个方式：
上述的特性和方式的基础用法以下：
JavaScript Code拷贝內容到剪贴板
- var canvas = document.getElementById("canvas");
- var context = canvas.getContext("2d");
-
- context.font="bold 30px Arial";
- context.strokeStyle = "#1712F4";
- context.strokeText("欢迎来到我的blog！",30,100);
-
- context.font="bold 50px Arial";
- var grd = context.createLinearGradient( 30 , 200, 400 , 300 );
- grd.addColorStop(0,"#1EF9F7");
- grd.addColorStop(0.25,"#FC0F31");
- grd.addColorStop(0.5,"#ECF811");
- grd.addColorStop(0.75,"#2F0AF1");
- grd.addColorStop(1,"#160303");
- context.fillStyle = grd;
- context.fillText("欢迎来到我的blog！",30,200);
-
- context.save();
- context.moveTo(200,280);
- context.lineTo(200,420);
- context.stroke();
- context.font="bold 20px Arial";
- context.fillStyle = "#F80707";
- context.textAlign="left";
- context.fillText("文字在特定的部位刚开始",200,300);
- context.textAlign="center";
- context.fillText("文字的管理中心被置放在特定的部位",200,350);
- context.textAlign="right";
- context.fillText("文字在特定的部位完毕",200,400);
- context.restore();
-
- context.save();
- context.moveTo(10,500);
- context.lineTo(500,500);
- context.stroke();
- context.fillStyle="#F60D0D";
- context.font="bold 20px Arial";
- context.textBaseline="top";
- context.fillText("特定部位在上面",10,500);
- context.textBaseline="bottom";
- context.fillText("特定部位在下面",150,500);
- context.textBaseline="middle";
- context.fillText("特定部位垂直居中",300,500);
- context.restore();
-
-
- context.font="bold 40px Arial";
- context.strokeStyle = "#16F643";
- var text = "欢迎来到我的blog！";
- context.strokeText("欢迎来到我的blog！",10,600);
- context.strokeText("上面标识符串的宽度为："+context.measureText(text).width,10,650);
-
实际效果以下：
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。
