首页 > 其他分享 >typescript重写canvas --9.绘制文字

typescript重写canvas --9.绘制文字

时间:2023-05-04 22:31:56浏览次数:46  
标签:文字 canvas typescript const -- myCanvas getContext context

typescript重写canvas --9.绘制文字

1.使用 canvas 绘制文字

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
<canvas id="myCanvas" width="450" height="400">
你的浏览器不支持HTML5
</canvas>
<script type="text/javascript">
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");  
    
//设定文字大小和字体
context.font="30px Arial";
//描画文字
context.fillText("Hello World",100,50);
    
</script>
</body>
</html>

显示效果如下

9.png

2.typescript重写canvas --绘制文字

html文件

<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="450" height="400">
你的浏览器不支持HTML5
</canvas>
<script src="./js/9.js"></script>

</body>
</html>

ts文件

const canvas=<HTMLCanvasElement>document.getElementById("myCanvas")
const context=canvas.getContext("2d") 
if (context){
    //设定文字大小和字体
    context.font="30px Arial";
    //描画文字
    context.fillText("Hello World",100,50);  
}

生成的js文件

"use strict";
const canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");
if (context) {
    //设定文字大小和字体
    context.font="30px Arial";
    //描画文字
    context.fillText("Hello World",100,50);  
}

标签:文字,canvas,typescript,const,--,myCanvas,getContext,context
From: https://blog.51cto.com/u_14483476/6244639

相关文章

  • Kubernetes资源对象管理
    API对象:也就是K8S的资源对象,是K8S集群中的管理操作单元。K8S集群系统每支持一项新功能,引入一项新技术,一定会新引入对应的API对象,支持对该功能的管理操作。一、Kubernetes资源对象查询1.1查询资源类型#列出当前集群中所有的资源类型kubectlapi-resources   字段说明NAME:资......
  • ds:顺序表删除重复元素的算法
    算法思想:1.遍历顺序表、移动元素(把未匹配到目标数据的元素前移i-k个位置)intk=0;inti=0;k用来计数,i用来扫描顺序表。当匹配到目标元素时k++,未匹配到目标元素时就i++遍历,并且要将未匹配到的元素前移i-k个位置。2.修改顺序表的length为length-k 例:删除顺序表中值为x的所有......
  • 网络对抗实验六 MSF应用基础
    Exp6MSF应用基础实验目标1.1一个主动攻击实践,尽量使用最新的类似漏洞;(1分)1.2一个针对浏览器的攻击,尽量使用最新的类似漏洞;(1分)1.3一个针对客户端的攻击,如Adobe或office,尽量使用最新的类似漏洞;(1分)1.4成功应用任何一个辅助模块。(1分)实验内容0实验准备0.1实验原理0.1.......
  • 5.4 2.3
    一、问题描述 二、分析循环体是:所有的小孩分一半的糖给右面的人,糖数块为奇数的人找老师要一块。有十个小孩,定义一个长度为10的整数型数组,糖果每次经过一次分配就打印一次,直到最后一次打印时,10个小孩所拥有的糖果数都相同,结束循环。1)定义初始条件intsweet[10]={10,2,8,22......
  • 命令行编译和执行java代码
    虽然现在IDE很强大又很智能,但是平常随意写点练手的代码的时候,直接在命令行中使用vim和java命令更为方便快捷,可以做到无鼠标纯键盘的操作。首先保证将java相关指令添加到了环境变量中;1.编译class文件:javac-d./Test.java编译好的class文件会放置到环境当前目录(./)中。-d......
  • 第十天打卡
    补充下列代码,使得程序的输出为:A:3A:15B:53155类和函数接口定义: 参见裁判测试程序样例中的类和函数接口。 裁判测试程序样例: #include<iostream>usingnamespacestd;classCMyClassA{intval;public:CMyClassA(int);voidvirtualprint();};CMyCl......
  • 5.4每日总结
    今天学习了matlif,学会了其基本的使用并且编写了一些程序,如下: golds.mfunction[xmin,fmin,iter]=golds(fun,a,b,tol)  rho=(sqrt(5)-1)/2;  x1=a+(1-rho)*(b-a);x2=a+rho*(b-a);  f1=fun(x1);f2=fun(x2);  iter=......
  • 十大排序算法
    0、算法分类十种常见排序算法可以分为两类比较类排序通过比较来决定元素间的相对次序,时间复杂度为O(nlogn)~O(n²)非比较类排序不通过比较来决定元素间的相对次序,其时间复杂度可以突破O(nlogn),以线性时间运行名次解释:时间/空间复杂度:描述一个算法执行时间/占用空......
  • SMU Spring 2023 Trial Contest Round 10
    A.RemoveDuplicates#include<bits/stdc++.h>//#defineinf0x3f3f3f3f#defineendl'\n'#defineintlonglongusingnamespacestd;constintN=2e3+10,mod=1e9+7;//typedeflonglongll;typedefpair<int,int>PII;//queue......
  • c:forEach简单使用
    个人认为这就相当于一个for循环语句<c:forEachitems="001"var="002"varStatus="003"begin="004"end="005"step="006"></c:forEach>001:接收遍历的集合eg.{a,b,c,d}002:放刚从001取出的每一条信息,var就表示a,b,c,d003:表示4种状......