zoukankan      html  css  js  c++  java
  • HTML5绘制实心的文本

    HTML5绘制实心的文本


    1、设计源码

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5绘制实心的文本</title>
    <script type="text/javascript">
    	function drawSolidText()
    	{
    		var canvas = document.getElementById("canvas");
    		var ctx = canvas.getContext("2d");
    		ctx.font = "40px 微软雅黑";
    		ctx.fillText("HTML5",200,200);
    	}
    </script>
    </head>
    
    <body onLoad="drawSolidText();">
       <canvas id="canvas" width="400" height="400"></canvas>
    </body>
    </html>
    

    2、实现结果



    3、源码说明

    (1)创建一个画布,设置宽度和高度

    <canvas id="canvas" width="400" height="400"></canvas>

    (2)获取到<canvas>元素

    var canvas = document.getElementById("canvas");

    (3)创建context对象

    var ctx = canvas.getContext("2d");

    (4)设置绘制文本的字体和字体大小

    ctx.font = "40px 微软雅黑";

    (5)在画布上绘制实心的文本,其中三个参数含义是:第一个是绘制的文本,第二个是绘制文本横坐标起始坐标,第三个是纵坐标的起始坐标

    ctx.fillText("HTML5",200,200);


  • 相关阅读:
    006_02SQLite_OpenHelper
    006_01SQLite_demo
    005_01XML_Serilizer
    004_05PullParser
    004_04SharedPreferences
    004_02文件读写模式
    004_01获取SD容量
    003_01电话拨号器
    maven项目中的pom.xml
    ORACLE提示表名无效
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13314311.html
Copyright © 2011-2022 走看看