canvas笔记-文字渲染
生活随笔
收集整理的這篇文章主要介紹了
canvas笔记-文字渲染
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
字體以及填充文字
程序運行截圖如下：
源碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">當前瀏覽器不支持canvas </canvas><script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.font = "bold 40px Arial";context.fillStyle = "#058";context.fillText("中文ABC1234！@#￥%", 40, 100);}</script></body> </html>其中：
context.font = "bold 40px Arial"; context.fillStyle = "#058"; context.fillText("中文ABC1234！@#￥%", 40, 100);其中：font指定了加粗bold與字體大小為40px及Arial。
使用fillStyle指定了顏色為#058，使用fillText設置了文字內容，以及再40，100處進行畫文字。
?
如果使用描邊進行繪畫
源碼如下：
<script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.font = "bold 40px Arial";context.fillStyle = "#058";context.fillText("中文ABC1234！@#￥%", 40, 100);context.strokeText("中文ABC1234！@#￥%", 40, 200);}</script>程序運行截圖如下：
再fillText與strokeText包含第四個參數，這個參數的意義是限制其寬度：
如下代碼：
<script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.font = "bold 40px Arial";context.fillStyle = "#058";context.fillText("中文ABC1234！@#￥%", 40, 100);context.strokeText("中文ABC1234！@#￥%", 40, 200);context.fillText("中文ABC1234！@#￥%", 40, 300, 100);context.strokeText("中文ABC1234！@#￥%", 40, 400, 100);}</script>程序運行截圖如下：
下面是使用線性梯度進行渲染下：
程序運行截圖如下：
源碼如下：
window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.font = "bold 40px Arial";context.fillStyle = "#058";context.fillText("中文ABC1234！@#￥%", 40, 100);context.strokeText("中文ABC1234！@#￥%", 40, 200);context.fillText("中文ABC1234！@#￥%", 40, 300, 100);context.strokeText("中文ABC1234！@#￥%", 40, 400, 100);let linearGrad = context.createLinearGradient(0, 0, 800, 0);linearGrad.addColorStop(0.0, "red");linearGrad.addColorStop(0.1, "black");linearGrad.addColorStop(0.2, "green");linearGrad.addColorStop(0.3, "yellow");linearGrad.addColorStop(0.4, "orange");linearGrad.addColorStop(0.5, "purple");linearGrad.addColorStop(0.6, "teal");linearGrad.addColorStop(0.7, "pink");linearGrad.addColorStop(1.0, "brown");context.fillStyle = linearGrad;context.fillText("中文ABC1234！@#￥%", 40, 500); }?
下面是使用圖片紋理的例子：
程序運行截圖如下：
源碼如下：
<script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.font = "bold 40px Arial";context.fillStyle = "#058";context.fillText("中文ABC1234！@#￥%", 40, 100);context.strokeText("中文ABC1234！@#￥%", 40, 200);context.fillText("中文ABC1234！@#￥%", 40, 300, 100);context.strokeText("中文ABC1234！@#￥%", 40, 400, 100);let linearGrad = context.createLinearGradient(0, 0, 800, 0);linearGrad.addColorStop(0.0, "red");linearGrad.addColorStop(0.1, "black");linearGrad.addColorStop(0.2, "green");linearGrad.addColorStop(0.3, "yellow");linearGrad.addColorStop(0.4, "orange");linearGrad.addColorStop(0.5, "purple");linearGrad.addColorStop(0.6, "teal");linearGrad.addColorStop(0.7, "pink");linearGrad.addColorStop(1.0, "brown");context.fillStyle = linearGrad;context.fillText("中文ABC1234！@#￥%", 40, 500);let bakgroundImage = new Image();bakgroundImage.src = "img/bg.jpg";bakgroundImage.onload = function(){let pattern = context.createPattern(bakgroundImage, "repeat");context.fillStyle = pattern;context.font = "bold 60px Arial";context.fillText("中文ABC1234！@#￥%", 40, 600);}}</script>?
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的canvas笔记-文字渲染的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java工作笔记-webService发
- 下一篇： Qt文档阅读笔记-WebEngine C