1.簡單實例1

<canvas width="300" height="300" id="canvasOne" class="canvasOne"></canvas> <script>var cancasOne = document.getElementById('canvasOne');var ctx = cancasOne.getContext('2d');ctx.font = 'bold 20px 微軟雅黑';ctx.fillText('張三豐', 10, 30);//創建漸變文字 ctx.font = "30px Verdana";var grandient = ctx.createLinearGradient(0, 0, canvasOne.width, 0);grandient.addColorStop('0', "magenta");grandient.addColorStop('0.5', 'blue');grandient.addColorStop('1.0', 'red');//用漸變填色 ctx.fillStyle = grandient;ctx.fillText('tinama3798.cn', 10, 100); </script>

2.實例2：

<canvas width="301" height="301" id="canvasOne" class="canvasOne"></canvas> <script>var cancasOne = document.getElementById('canvasOne');var ctx = cancasOne.getContext('2d');//畫參考線function drawLine() {ctx.save();ctx.strokeStyle = 'blue';//橫線 ctx.beginPath();ctx.moveTo(0, canvasOne.width / 2);ctx.lineTo(canvasOne.height, canvasOne.width / 2);ctx.stroke();//豎線 ctx.beginPath();ctx.moveTo(canvasOne.width / 2, 0);ctx.lineTo(canvasOne.width / 2, canvasOne.height);ctx.stroke();ctx.restore();}drawLine();ctx.font = 'bold 50px 楷體';ctx.textAlign = 'center';ctx.textBaseline = 'middle';ctx.fillText('張三豐', canvasOne.width / 2,canvasOne.height / 2); </script>

3.實例3：

<input id="inputOne" /> <canvas width="200" height="200" id="canvasOne" class="canvasOne"></canvas> <script>var cancasOne = document.getElementById('canvasOne');var ctx = cancasOne.getContext('2d');//畫參考線function drawLine() {ctx.save();var point1 = [5, 5],point2 = [5, 195],point3 = [195, 5],point4 = [195, 195];//2.畫對角線 ctx.lineWidth = 0.5;ctx.strokeStyle = '#b4210f';ctx.beginPath();moveTo(point1);lintTo(point4);ctx.stroke();moveTo(point2);lineTo(point3);ctx.stroke();ctx.closePath();//2.畫 內線 ctx.beginPath();var xCenter = (point4[0] - point1[0]) / 2 + point1[0];var yCenter = (point4[1] - point1[1]) / 2 + point1[1];//橫線 moveTo([point1[0], yCenter]);lineTo([point4[1], yCenter]);ctx.stroke();moveTo([xCenter, point1[1]]);lintTo([xCenter, point4[0]]);ctx.stroke();ctx.closePath();//1.畫 邊線 ctx.lineWidth = 2;ctx.lineCap = 'square';ctx.strokeStyle = '#FE0000';ctx.beginPath();moveTo(point1);lineTo(point2, point4, point3, point1);ctx.stroke();ctx.closePath();ctx.restore();}function lineTo() {for (var i = 0; i < arguments.length; i++) {var item = arguments[i];lintTo(item);}}function lintTo(point) {ctx.lineTo(point[0], point[1]);}function moveTo(point) {ctx.moveTo(point[0], point[1]);}drawLine();function setValue(text) {//清屏幕 ctx.clearRect(0, 0, canvasOne.width, cancasOne.height);ctx.fillStyle = 'white';ctx.fillRect(0, 0, cancasOne.width, cancasOne.height);//畫參考線 drawLine();//畫字 ctx.font = 'bold 140px 楷體';ctx.textAlign = 'center';ctx.textBaseline = 'middle';ctx.fillStyle = 'black';ctx.fillText(text, canvasOne.width / 2,canvasOne.height / 2);}var inputOne = document.getElementById('inputOne');inputOne.onchange = function () {console.info(inputOne.value);setValue(inputOne.value);} </script>

?

轉載于:https://www.cnblogs.com/tianma3798/p/5563607.html

總結

以上是生活随笔為你收集整理的HTML5 Canvas Text实例1的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。