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);


  • 相关阅读:
    老陈与小石头运算代码
    第五次作业
    老陈与小石头
    简易四则运算
    四则运算
    对git的认识
    第一次作业
    arcgis-tomcat-cors
    jquery deferred promise
    springloaded hot deploy
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13314311.html
Copyright © 2011-2022 走看看