H5画布绘制文本

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style>
			#myCanvas{
				box-shadow: 0 0 5px black;
				margin-top: 50px;
				margin-left: 50px;
			}
		style>
	head>
	<body>
		<canvas id="myCanvas" width="500" height="500">canvas>
	body>
    <script>
        //获取画布
    	var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        //画出两条辅助线，fillRect宽高度为1则画出线
        ctx.fillRect(100, 0, 1, 100);
        ctx.fillRect(0, 100, 100, 1);
        //设置绘制的字体
        ctx.font = "50px 楷体";
        //设置文本对齐，start文本指定位置开始，end文本指定位置结束，center文本的中心被放置在指定位置
        ctx.textAlign = "start";
        //文本垂直，top bottom middle
        ctx.textBaseline = "bottom";
        //设置阴影颜色、大小、偏移
        ctx.shadowColor = "red";
        ctx.shadowBlur = 10;
        ctx.shadowOffsetX = 3;
        ctx.shadowOffsetY = 10;
        //文本尺寸测量
        var ctext = ctx.measureText("明朝那些事儿");
        var wid = ctext.width;
        //创建线条渐变,addColorStop指定颜色停止
        var linear = ctx.createLinearGradient(100, 100, 100+width, 100);
        linear.addColorStop(0, "red");
        linear.addColorStop(0.5, "orange");
        linear.addColorStop(1, "blue");
        //样色设为渐变
        ctx.fillStyle = linear;
        ctx.strokeStyle = linear;
        //绘制实心的文本
        ctx.fillText("明朝那些事儿", 100, 100);
        //绘制空心的文本
        ctx.strokeText("明朝那些事儿", 100, 200);
    script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

在这里插入图片描述

相关阅读:
使用jenkins+gitee创建docker镜像并运行
Programming Differential Privacy第八章
什么是高可用架构
Ansible之playbooks剧本
webAPI
基于SpringBoot和Leaflet的地震台网信息预警可视化
DOM树的遍历-----修改样式，选择元素，创建和删除节点
C语言-整数和浮点数在内存中的存储-详解-上
【Oracle】Navicat Premium 连接 Oracle的两种方式
力扣刷题日记——哈希

原文地址：https://blog.csdn.net/dolly_baby/article/details/126654586