canvas笔记-文字渲染
生活随笔
收集整理的這篇文章主要介紹了
canvas笔记-文字渲染
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
字體以及填充文字
程序運(yùn)行截圖如下：
源碼如下：
<!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;">當(dāng)前瀏覽器不支持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設(shè)置了文字內(nèi)容，以及再40，100處進(jìn)行畫文字。
?
如果使用描邊進(jìn)行繪畫
源碼如下：
<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>程序運(yùn)行截圖如下：
再fillText與strokeText包含第四個(gè)參數(shù)，這個(gè)參數(shù)的意義是限制其寬度：
如下代碼：
<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>程序運(yùn)行截圖如下：
下面是使用線性梯度進(jìn)行渲染下：
程序運(yùn)行截圖如下：
源碼如下：
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); }?
下面是使用圖片紋理的例子：
程序運(yùn)行截圖如下：
源碼如下：
<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>?
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的canvas笔记-文字渲染的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Java工作笔记-webService发
- 下一篇： Java笔记-SM3（国密3）和SM4（