HTML之Canvas画布绘制椭圆等腰三角形五角星和26个字母大小写形状
原创HTML之Canvas画布绘制椭圆等腰三角形五角星和26个字母大小写形状
原创
菜菜有点菜
修改于 2024-06-10 14:40:10
修改于 2024-06-10 14:40:10
作业：
椭圆绘制
代码片段
function getTuoYuan(params) {
pen.beginPath();
// 画布宽高 。。中心坐标和半径
pen.ellipse(Canvas.width / 2, Canvas.height / 2, 100, 50, 0, 0, 2 * Math.PI);
pen.stroke();
}等腰三角形
function sanJiaoXing(params) {
pen.beginPath();
// x， y 落笔坐标
pen.beginPath();
pen.moveTo(250, 10);
pen.lineTo(10, 300);
pen.lineTo(490, 300);
pen.closePath(); // 闭合路径
pen.stroke(); // 绘制已定义的路径。
}准星
function getRound(params) {
pen.beginPath(); // 起始一条路径，或重置当前路径。
pen.arc(250, 250, 100, 50, 0, 2 * Math.PI);
pen.stroke();
// 绘制十字架
pen.beginPath();
pen.moveTo(350, 250); // 初始位置
pen.lineTo(150, 250);
pen.stroke();
pen.beginPath();
pen.moveTo(250, 350);
pen.lineTo(250, 150);
pen.stroke();
}五角星
function wuJiaoXing(params) {
pen.beginPath();
pen.moveTo(250, 20);
pen.lineTo(300, 100);
pen.lineTo(400, 100);
pen.lineTo(320, 180);
pen.lineTo(350, 300);
pen.lineTo(250, 220);
pen.lineTo(150, 300);
pen.lineTo(180, 180);
pen.lineTo(100, 100);
pen.lineTo(200, 100);
pen.lineTo(250, 20);
pen.stroke();
}
圆柱形
function YuanZhu(params) {
pen.beginPath();
pen.ellipse(250, 100, 100, 50, 0, 0, 2 * Math.PI);
pen.stroke();
// SHUXIAN
pen.beginPath();
pen.moveTo(150, 100);
pen.lineTo(150, 400);
pen.stroke();
pen.beginPath();
pen.moveTo(350, 100);
pen.lineTo(350, 400);
pen.stroke();
// 画圆弧
pen.beginPath();
pen.ellipse(250, 400, 100, 50, 0, 0, 1 * Math.PI);
pen.stroke();
}html画布绘制26个英文字母大小写
基于canvasAPI手绘画出26个英文字母大小写，用JavaScript操作canvas对象实现绘制26个英文字母的坐标点，css做布局样式。html提供页面框架
function ershiliu(params) {
const startX = 50;
const startY = 50;
const letterSpacing = 30;
const lineSpacing = 100;
const lettersPerLine = 13;
pen.font = "30px Arial";
pen.textAlign = "center";
pen.textBaseline = "middle";
// letter字母 计数
const totalLetters = 52;
let x, y;
for (let i = 0; i < totalLetters; i++) {
x = startX + (i % lettersPerLine) * letterSpacing;
y = startY + Math.floor(i / lettersPerLine) * lineSpacing;
let letter;
if (i < 26) {
letter = String.fromCharCode(65 + i); // 更新 A-Z
} else {
letter = String.fromCharCode(97 + (i - 26)); // 小写 a-z
}
pen.beginPath();
switch (letter) {
case 'A': drawA(pen, x, y); break;
case 'B': drawB(pen, x, y); break;
case 'C': drawC(pen, x, y); break;
case 'D': drawD(pen, x, y); break;
case 'E': drawE(pen, x, y); break;
case 'F': drawF(pen, x, y); break;
case 'G': drawG(pen, x, y); break;
case 'H': drawH(pen, x, y); break;
case 'I': drawI(pen, x, y); break;
case 'J': drawJ(pen, x, y); break;
case 'K': drawK(pen, x, y); break;
case 'L': drawL(pen, x, y); break;
case 'M': drawM(pen, x, y); break;
case 'N': drawN(pen, x, y); break;
case 'O': drawO(pen, x, y); break;
case 'P': drawP(pen, x, y); break;
case 'Q': drawQ(pen, x, y); break;
case 'R': drawR(pen, x, y); break;
case 'S': drawS(pen, x, y); break;
case 'T': drawT(pen, x, y); break;
case 'U': drawU(pen, x, y); break;
case 'V': drawV(pen, x, y); break;
case 'W': drawW(pen, x, y); break;
case 'X': drawX(pen, x, y); break;
case 'Y': drawY(pen, x, y); break;
case 'Z': drawZ(pen, x, y); break;
case 'a': drawa(pen, x, y); break;
case 'b': drawb(pen, x, y); break;
case 'c': drawc(pen, x, y); break;
case 'd': drawd(pen, x, y); break;
case 'e': drawe(pen, x, y); break;
case 'f': drawf(pen, x, y); break;
case 'g': drawg(pen, x, y); break;
case 'h': drawh(pen, x, y); break;
case 'i': drawi(pen, x, y); break;
case 'j': drawj(pen, x, y); break;
case 'k': drawk(pen, x, y); break;
case 'l': drawl(pen, x, y); break;
case 'm': drawm(pen, x, y); break;
case 'n': drawn(pen, x, y); break;
case 'o': drawo(pen, x, y); break;
case 'p': drawp(pen, x, y); break;
case 'q': drawq(pen, x, y); break;
case 'r': drawr(pen, x, y); break;
case 's': draws(pen, x, y); break;
case 't': drawt(pen, x, y); break;
case 'u': drawu(pen, x, y); break;
case 'v': drawv(pen, x, y); break;
case 'w': draww(pen, x, y); break;
case 'x': drawx(pen, x, y); break;
case 'y': drawy(pen, x, y); break;
case 'z': drawz(pen, x, y); break;
}
pen.stroke();
}
// 绘制大写字母
function drawA(pen, x, y) {
pen.moveTo(x - 10, y + 20);
pen.lineTo(x, y);
pen.lineTo(x + 10, y + 20);
pen.moveTo(x - 5, y + 10);
pen.lineTo(x + 5, y + 10);
}
function drawB(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x - 5, y + 20);
pen.lineTo(x + 5, y + 15);
pen.lineTo(x - 5, y + 10);
pen.lineTo(x + 5, y + 5);
pen.lineTo(x - 5, y);
}
function drawC(pen, x, y) {
pen.moveTo(x + 5, y);
pen.arc(x, y + 10, 10, -Math.PI / 2, Math.PI / 2, false);
}
function drawD(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x - 5, y + 20);
pen.arc(x - 5, y + 10, 10, -Math.PI / 2, Math.PI / 2, false);
}
function drawE(pen, x, y) {
pen.moveTo(x + 5, y);
pen.lineTo(x - 5, y);
pen.lineTo(x - 5, y + 20);
pen.lineTo(x + 5, y + 20);
pen.moveTo(x - 5, y + 10);
pen.lineTo(x + 5, y + 10);
}
function drawF(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x + 5, y);
pen.moveTo(x - 5, y);
pen.lineTo(x - 5, y + 20);
pen.moveTo(x - 5, y + 10);
pen.lineTo(x + 5, y + 10);
}
function drawG(pen, x, y) {
pen.moveTo(x + 5, y + 5);
pen.arc(x, y + 10, 10, -Math.PI / 2, Math.PI / 2, false);
pen.lineTo(x, y + 10);
pen.lineTo(x + 5, y + 10);
}
function drawH(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x - 5, y + 20);
pen.moveTo(x + 5, y);
pen.lineTo(x + 5, y + 20);
pen.moveTo(x - 5, y + 10);
pen.lineTo(x + 5, y + 10);
}
function drawI(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x + 5, y);
pen.moveTo(x, y);
pen.lineTo(x, y + 20);
pen.moveTo(x - 5, y + 20);
pen.lineTo(x + 5, y + 20);
}
function drawJ(pen, x, y) {
pen.moveTo(x + 5, y);
pen.lineTo(x, y);
pen.lineTo(x, y + 20);
pen.arc(x - 5, y + 15, 5, 0, Math.PI, true);
}
function drawK(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x - 5, y + 20);
pen.moveTo(x - 5, y + 10);
pen.lineTo(x + 5, y);
pen.moveTo(x - 5, y + 10);
pen.lineTo(x + 5, y + 20);
}
function drawL(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x - 5, y + 20);
pen.lineTo(x + 5, y + 20);
}
function drawM(pen, x, y) {
pen.moveTo(x - 5, y + 20);
pen.lineTo(x - 5, y);
pen.lineTo(x, y + 10);
pen.lineTo(x + 5, y);
pen.lineTo(x + 5, y + 20);
}
function drawN(pen, x, y) {
pen.moveTo(x - 5, y + 20);
pen.lineTo(x - 5, y);
pen.lineTo(x + 5, y + 20);
pen.lineTo(x + 5, y);
}
function drawO(pen, x, y) {
pen.moveTo(x + 5, y + 10);
pen.arc(x, y + 10, 10, 0, 2 * Math.PI, false);
}
function drawP(pen, x, y) {
pen.moveTo(x - 5, y + 20);
pen.lineTo(x - 5, y);
pen.lineTo(x + 5, y);
pen.arc(x, y + 5, 5, 1.5 * Math.PI, 0.5 * Math.PI, false);
}
function drawQ(pen, x, y) {
pen.moveTo(x + 5, y + 10);
pen.arc(x, y + 10, 10, 0, 2 * Math.PI, false);
pen.moveTo(x, y + 15);
pen.lineTo(x + 5, y + 20);
}
function drawR(pen, x, y) {
pen.moveTo(x - 5, y + 20);
pen.lineTo(x - 5, y);
pen.lineTo(x + 5, y);
pen.arc(x, y + 5, 5, 1.5 * Math.PI, 0.5 * Math.PI, false);
pen.moveTo(x, y + 10);
pen.lineTo(x + 5, y + 20);
}
function drawS(pen, x, y) {
pen.moveTo(x + 5, y);
pen.arc(x, y + 5, 5, 1.5 * Math.PI, 0.5 * Math.PI, false);
pen.moveTo(x - 5, y + 10);
pen.arc(x, y + 15, 5, 1.5 * Math.PI, 0.5 * Math.PI, true);
}
function drawT(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x + 5, y);
pen.moveTo(x, y);
pen.lineTo(x, y + 20);
}
function drawU(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x - 5, y + 10);
pen.arc(x, y + 10, 5, Math.PI, 2 * Math.PI, false);
pen.lineTo(x + 5, y);
}
function drawV(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x, y + 20);
pen.lineTo(x + 5, y);
}
function drawW(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x - 3, y + 20);
pen.lineTo(x, y + 15);
pen.lineTo(x + 3, y + 20);
pen.lineTo(x + 5, y);
}
function drawX(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x + 5, y + 20);
pen.moveTo(x + 5, y);
pen.lineTo(x - 5, y + 20);
}
function drawY(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x, y + 10);
pen.lineTo(x + 5, y);
pen.moveTo(x, y + 10);
pen.lineTo(x, y + 20);
}
function drawZ(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x + 5, y);
pen.lineTo(x - 5, y + 20);
pen.lineTo(x + 5, y + 20);
}
// 绘制小写字母
function drawa(pen, x, y) {
pen.moveTo(x - 5, y + 10);
pen.arc(x, y + 10, 5, 0, 2 * Math.PI, false); // a的源泉
pen.moveTo(x + 5, y + 10);
pen.lineTo(x + 5, y + 20);
}
function drawb(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x - 5, y + 20);
pen.lineTo(x + 5, y + 15);
pen.lineTo(x - 5, y + 10);
pen.lineTo(x + 5, y + 5);
}
function drawc(pen, x, y) {
pen.moveTo(x + 5, y + 5);
pen.arc(x, y + 10, 5, -Math.PI / 2, Math.PI / 2, false);
}
function drawd(pen, x, y) {
pen.moveTo(x + 5, y);
pen.lineTo(x + 5, y + 20);
pen.lineTo(x - 5, y + 15);
pen.lineTo(x + 5, y + 10);
pen.lineTo(x - 5, y + 5);
}
function drawe(pen, x, y) {
pen.moveTo(x + 5, y + 10);
pen.arc(x, y + 10, 5, 0, 2 * Math.PI, false);
pen.moveTo(x - 5, y + 10);
pen.lineTo(x + 5, y + 10);
}
function drawf(pen, x, y) {
pen.moveTo(x + 5, y);
pen.lineTo(x, y);
pen.lineTo(x, y + 20);
pen.moveTo(x, y + 10);
pen.lineTo(x + 5, y + 10);
}
function drawg(pen, x, y) {
pen.moveTo(x + 5, y + 5);
pen.arc(x, y + 10, 5, -Math.PI / 2, Math.PI / 2, false);
pen.lineTo(x, y + 15);
pen.lineTo(x + 5, y + 15);
}
function drawh(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x - 5, y + 20);
pen.moveTo(x - 5, y + 10);
pen.arc(x - 5, y + 15, 5, -Math.PI / 2, Math.PI / 2, false);
}
function drawi(pen, x, y) {
pen.moveTo(x, y);
pen.lineTo(x, y + 10);
pen.moveTo(x, y + 15);
pen.lineTo(x, y + 20);
}
function drawj(pen, x, y) {
pen.moveTo(x, y);
pen.lineTo(x, y + 10);
pen.moveTo(x, y + 15);
pen.arc(x - 5, y + 15, 5, 0, Math.PI, true);
}
function drawk(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x - 5, y + 20);
pen.moveTo(x - 5, y + 10);
pen.lineTo(x + 5, y);
pen.moveTo(x - 5, y + 10);
pen.lineTo(x + 5, y + 20);
}
function drawl(pen, x, y) {
pen.moveTo(x, y);
pen.lineTo(x, y + 20);
}
function drawm(pen, x, y) {
pen.moveTo(x - 5, y + 10);
pen.lineTo(x - 5, y + 20);
pen.moveTo(x - 5, y + 10);
pen.lineTo(x, y + 15);
pen.lineTo(x + 5, y + 10);
pen.lineTo(x + 5, y + 20);
}
function drawn(pen, x, y) {
pen.moveTo(x - 5, y + 10);
pen.lineTo(x - 5, y + 20);
pen.moveTo(x - 5, y + 10);
pen.lineTo(x + 5, y + 15);
pen.lineTo(x + 5, y + 20);
}
function drawo(pen, x, y) {
pen.moveTo(x + 5, y + 10);
pen.arc(x, y + 10, 5, 0, 2 * Math.PI, false);
}
function drawp(pen, x, y) {
pen.moveTo(x - 5, y + 10);
pen.lineTo(x - 5, y + 20);
pen.moveTo(x - 5, y + 10);
pen.lineTo(x + 5, y + 15);
pen.lineTo(x - 5, y + 20);
}
function drawq(pen, x, y) {
pen.moveTo(x + 5, y + 10);
pen.arc(x, y + 10, 5, 0, 2 * Math.PI, false);
pen.moveTo(x, y + 15);
pen.lineTo(x + 5, y + 20);
}
function drawr(pen, x, y) {
pen.moveTo(x - 5, y + 10);
pen.lineTo(x - 5, y + 20);
pen.moveTo(x - 5, y + 10);
pen.lineTo(x + 5, y + 10);
}
function draws(pen, x, y) {
pen.moveTo(x + 5, y);
pen.arc(x, y + 5, 5, 1.5 * Math.PI, 0.5 * Math.PI, false);
pen.moveTo(x - 5, y + 10);
pen.arc(x, y + 15, 5, 1.5 * Math.PI, 0.5 * Math.PI, true);
}
function drawt(pen, x, y) {
pen.moveTo(x, y);
pen.lineTo(x, y + 20);
pen.moveTo(x - 5, y + 10);
pen.lineTo(x + 5, y + 10);
}
function drawu(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x - 5, y + 10);
pen.arc(x, y + 10, 5, Math.PI, 2 * Math.PI, false);
pen.lineTo(x + 5, y);
}
function drawv(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x, y + 10);
pen.lineTo(x + 5, y);
}
function draww(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x - 3, y + 10);
pen.lineTo(x, y + 5);
pen.lineTo(x + 3, y + 10);
pen.lineTo(x + 5, y);
}
function drawx(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x + 5, y + 10);
pen.moveTo(x + 5, y);
pen.lineTo(x - 5, y + 10);
}
function drawy(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x, y + 10);
pen.lineTo(x + 5, y);
pen.moveTo(x, y + 10);
pen.lineTo(x, y + 15);
pen.arc(x - 5, y + 15, 5, 0, Math.PI, true);
}
function drawz(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x + 5, y);
pen.lineTo(x - 5, y + 10);
pen.lineTo(x + 5, y + 10);
}
}
html基础结构
<div class="container">
<div><canvas id="Canvas" width="500" height="500"></canvas></div>
<div class="btn">
<button onclick="getTuoYuan()">椭圆形</button>
<button onclick="sanJiaoXing()">直角三角形</button>
<button onclick="getRound()">准星⚪</button>
<button onclick="wuJiaoXing()">五角星</button>
<button onclick="YuanZhu()">圆柱</button>
<button onclick="ershiliu()">26个字母</button>
<button onclick="crateCanvas()">新建空白画布</button>
</div>
</div>ccss样式
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;/* 水平居中 */
height: 100vh;/* div占满高度 */
justify-content: center;/* 垂直居中 */
}
#Canvas {
/* background-color: #ccc; */
border: 2px solid #ccc;
}
.btn {
margin-top: 20px;/* 按钮画布距离 */
}
.btn button {
margin: 5px;
}
</style>完整代码
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <!--<![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;/* 水平居中 */
height: 100vh;/* div占满高度 */
justify-content: center;/* 垂直居中 */
}
#Canvas {
/* background-color: #ccc; */
border: 2px solid #ccc;
}
.btn {
margin-top: 20px;/* 按钮画布距离 */
}
.btn button {
margin: 5px;
}
</style>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="container">
<div><canvas id="Canvas" width="500" height="500"></canvas></div>
<div class="btn">
<button onclick="getTuoYuan()">椭圆形</button>
<button onclick="sanJiaoXing()">直角三角形</button>
<button onclick="getRound()">准星⚪</button>
<button onclick="wuJiaoXing()">五角星</button>
<button onclick="YuanZhu()">圆柱</button>
<button onclick="ershiliu()">26个字母</button>
<button onclick="crateCanvas()">新建空白画布</button>
</div>
</div>
<script>
// 挂载全局dom对象
const Canvas = document.getElementById("Canvas"); // 获取对象
const pen = Canvas.getContext("2d"); // 创建2d画笔
function crateCanvas() {
Canvas.width = Canvas.width;
}
function getRound(params) {
pen.beginPath(); // 起始一条路径，或重置当前路径。
pen.arc(250, 250, 100, 50, 0, 2 * Math.PI);
pen.stroke();
// 绘制十字架
pen.beginPath();
pen.moveTo(350, 250); // 初始位置
pen.lineTo(150, 250);
pen.stroke();
pen.beginPath();
pen.moveTo(250, 350);
pen.lineTo(250, 150);
pen.stroke();
}
function getTuoYuan(params) {
pen.beginPath();
// 画布宽高 。。中心坐标和半径
pen.ellipse(Canvas.width / 2, Canvas.height / 2, 100, 50, 0, 0, 2 * Math.PI);
pen.stroke();
}
function sanJiaoXing(params) {
pen.beginPath();
// x， y 落笔坐标
pen.beginPath();
pen.moveTo(250, 10);
pen.lineTo(10, 300);
pen.lineTo(490, 300);
pen.closePath(); // 闭合路径
pen.stroke(); // 绘制已定义的路径。
}
function wuJiaoXing(params) {
pen.beginPath();
pen.moveTo(250, 20);
pen.lineTo(300, 100);
pen.lineTo(400, 100);
pen.lineTo(320, 180);
pen.lineTo(350, 300);
pen.lineTo(250, 220);
pen.lineTo(150, 300);
pen.lineTo(180, 180);
pen.lineTo(100, 100);
pen.lineTo(200, 100);
pen.lineTo(250, 20);
pen.stroke();
}
function YuanZhu(params) {
pen.beginPath();
pen.ellipse(250, 100, 100, 50, 0, 0, 2 * Math.PI);
pen.stroke();
// SHUXIAN
pen.beginPath();
pen.moveTo(150, 100);
pen.lineTo(150, 400);
pen.stroke();
pen.beginPath();
pen.moveTo(350, 100);
pen.lineTo(350, 400);
pen.stroke();
// 画圆弧
pen.beginPath();
pen.ellipse(250, 400, 100, 50, 0, 0, 1 * Math.PI);
pen.stroke();
}
function ershiliu(params) {
const startX = 50;
const startY = 50;
const letterSpacing = 30;
const lineSpacing = 100;
const lettersPerLine = 13;
pen.font = "30px Arial";
pen.textAlign = "center";
pen.textBaseline = "middle";
// letter字母 计数
const totalLetters = 52;
let x, y;
for (let i = 0; i < totalLetters; i++) {
x = startX + (i % lettersPerLine) * letterSpacing;
y = startY + Math.floor(i / lettersPerLine) * lineSpacing;
let letter;
if (i < 26) {
letter = String.fromCharCode(65 + i); // 更新 A-Z
} else {
letter = String.fromCharCode(97 + (i - 26)); // 小写 a-z
}
pen.beginPath();
switch (letter) {
case 'A': drawA(pen, x, y); break;
case 'B': drawB(pen, x, y); break;
case 'C': drawC(pen, x, y); break;
case 'D': drawD(pen, x, y); break;
case 'E': drawE(pen, x, y); break;
case 'F': drawF(pen, x, y); break;
case 'G': drawG(pen, x, y); break;
case 'H': drawH(pen, x, y); break;
case 'I': drawI(pen, x, y); break;
case 'J': drawJ(pen, x, y); break;
case 'K': drawK(pen, x, y); break;
case 'L': drawL(pen, x, y); break;
case 'M': drawM(pen, x, y); break;
case 'N': drawN(pen, x, y); break;
case 'O': drawO(pen, x, y); break;
case 'P': drawP(pen, x, y); break;
case 'Q': drawQ(pen, x, y); break;
case 'R': drawR(pen, x, y); break;
case 'S': drawS(pen, x, y); break;
case 'T': drawT(pen, x, y); break;
case 'U': drawU(pen, x, y); break;
case 'V': drawV(pen, x, y); break;
case 'W': drawW(pen, x, y); break;
case 'X': drawX(pen, x, y); break;
case 'Y': drawY(pen, x, y); break;
case 'Z': drawZ(pen, x, y); break;
case 'a': drawa(pen, x, y); break;
case 'b': drawb(pen, x, y); break;
case 'c': drawc(pen, x, y); break;
case 'd': drawd(pen, x, y); break;
case 'e': drawe(pen, x, y); break;
case 'f': drawf(pen, x, y); break;
case 'g': drawg(pen, x, y); break;
case 'h': drawh(pen, x, y); break;
case 'i': drawi(pen, x, y); break;
case 'j': drawj(pen, x, y); break;
case 'k': drawk(pen, x, y); break;
case 'l': drawl(pen, x, y); break;
case 'm': drawm(pen, x, y); break;
case 'n': drawn(pen, x, y); break;
case 'o': drawo(pen, x, y); break;
case 'p': drawp(pen, x, y); break;
case 'q': drawq(pen, x, y); break;
case 'r': drawr(pen, x, y); break;
case 's': draws(pen, x, y); break;
case 't': drawt(pen, x, y); break;
case 'u': drawu(pen, x, y); break;
case 'v': drawv(pen, x, y); break;
case 'w': draww(pen, x, y); break;
case 'x': drawx(pen, x, y); break;
case 'y': drawy(pen, x, y); break;
case 'z': drawz(pen, x, y); break;
}
pen.stroke();
}
// 绘制大写字母
function drawA(pen, x, y) {
pen.moveTo(x - 10, y + 20);
pen.lineTo(x, y);
pen.lineTo(x + 10, y + 20);
pen.moveTo(x - 5, y + 10);
pen.lineTo(x + 5, y + 10);
}
function drawB(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x - 5, y + 20);
pen.lineTo(x + 5, y + 15);
pen.lineTo(x - 5, y + 10);
pen.lineTo(x + 5, y + 5);
pen.lineTo(x - 5, y);
}
function drawC(pen, x, y) {
pen.moveTo(x + 5, y);
pen.arc(x, y + 10, 10, -Math.PI / 2, Math.PI / 2, false);
}
function drawD(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x - 5, y + 20);
pen.arc(x - 5, y + 10, 10, -Math.PI / 2, Math.PI / 2, false);
}
function drawE(pen, x, y) {
pen.moveTo(x + 5, y);
pen.lineTo(x - 5, y);
pen.lineTo(x - 5, y + 20);
pen.lineTo(x + 5, y + 20);
pen.moveTo(x - 5, y + 10);
pen.lineTo(x + 5, y + 10);
}
function drawF(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x + 5, y);
pen.moveTo(x - 5, y);
pen.lineTo(x - 5, y + 20);
pen.moveTo(x - 5, y + 10);
pen.lineTo(x + 5, y + 10);
}
function drawG(pen, x, y) {
pen.moveTo(x + 5, y + 5);
pen.arc(x, y + 10, 10, -Math.PI / 2, Math.PI / 2, false);
pen.lineTo(x, y + 10);
pen.lineTo(x + 5, y + 10);
}
function drawH(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x - 5, y + 20);
pen.moveTo(x + 5, y);
pen.lineTo(x + 5, y + 20);
pen.moveTo(x - 5, y + 10);
pen.lineTo(x + 5, y + 10);
}
function drawI(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x + 5, y);
pen.moveTo(x, y);
pen.lineTo(x, y + 20);
pen.moveTo(x - 5, y + 20);
pen.lineTo(x + 5, y + 20);
}
function drawJ(pen, x, y) {
pen.moveTo(x + 5, y);
pen.lineTo(x, y);
pen.lineTo(x, y + 20);
pen.arc(x - 5, y + 15, 5, 0, Math.PI, true);
}
function drawK(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x - 5, y + 20);
pen.moveTo(x - 5, y + 10);
pen.lineTo(x + 5, y);
pen.moveTo(x - 5, y + 10);
pen.lineTo(x + 5, y + 20);
}
function drawL(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x - 5, y + 20);
pen.lineTo(x + 5, y + 20);
}
function drawM(pen, x, y) {
pen.moveTo(x - 5, y + 20);
pen.lineTo(x - 5, y);
pen.lineTo(x, y + 10);
pen.lineTo(x + 5, y);
pen.lineTo(x + 5, y + 20);
}
function drawN(pen, x, y) {
pen.moveTo(x - 5, y + 20);
pen.lineTo(x - 5, y);
pen.lineTo(x + 5, y + 20);
pen.lineTo(x + 5, y);
}
function drawO(pen, x, y) {
pen.moveTo(x + 5, y + 10);
pen.arc(x, y + 10, 10, 0, 2 * Math.PI, false);
}
function drawP(pen, x, y) {
pen.moveTo(x - 5, y + 20);
pen.lineTo(x - 5, y);
pen.lineTo(x + 5, y);
pen.arc(x, y + 5, 5, 1.5 * Math.PI, 0.5 * Math.PI, false);
}
function drawQ(pen, x, y) {
pen.moveTo(x + 5, y + 10);
pen.arc(x, y + 10, 10, 0, 2 * Math.PI, false);
pen.moveTo(x, y + 15);
pen.lineTo(x + 5, y + 20);
}
function drawR(pen, x, y) {
pen.moveTo(x - 5, y + 20);
pen.lineTo(x - 5, y);
pen.lineTo(x + 5, y);
pen.arc(x, y + 5, 5, 1.5 * Math.PI, 0.5 * Math.PI, false);
pen.moveTo(x, y + 10);
pen.lineTo(x + 5, y + 20);
}
function drawS(pen, x, y) {
pen.moveTo(x + 5, y);
pen.arc(x, y + 5, 5, 1.5 * Math.PI, 0.5 * Math.PI, false);
pen.moveTo(x - 5, y + 10);
pen.arc(x, y + 15, 5, 1.5 * Math.PI, 0.5 * Math.PI, true);
}
function drawT(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x + 5, y);
pen.moveTo(x, y);
pen.lineTo(x, y + 20);
}
function drawU(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x - 5, y + 10);
pen.arc(x, y + 10, 5, Math.PI, 2 * Math.PI, false);
pen.lineTo(x + 5, y);
}
function drawV(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x, y + 20);
pen.lineTo(x + 5, y);
}
function drawW(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x - 3, y + 20);
pen.lineTo(x, y + 15);
pen.lineTo(x + 3, y + 20);
pen.lineTo(x + 5, y);
}
function drawX(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x + 5, y + 20);
pen.moveTo(x + 5, y);
pen.lineTo(x - 5, y + 20);
}
function drawY(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x, y + 10);
pen.lineTo(x + 5, y);
pen.moveTo(x, y + 10);
pen.lineTo(x, y + 20);
}
function drawZ(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x + 5, y);
pen.lineTo(x - 5, y + 20);
pen.lineTo(x + 5, y + 20);
}
// 绘制小写字母
function drawa(pen, x, y) {
pen.moveTo(x - 5, y + 10);
pen.arc(x, y + 10, 5, 0, 2 * Math.PI, false); // a的源泉
pen.moveTo(x + 5, y + 10);
pen.lineTo(x + 5, y + 20);
}
function drawb(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x - 5, y + 20);
pen.lineTo(x + 5, y + 15);
pen.lineTo(x - 5, y + 10);
pen.lineTo(x + 5, y + 5);
}
function drawc(pen, x, y) {
pen.moveTo(x + 5, y + 5);
pen.arc(x, y + 10, 5, -Math.PI / 2, Math.PI / 2, false);
}
function drawd(pen, x, y) {
pen.moveTo(x + 5, y);
pen.lineTo(x + 5, y + 20);
pen.lineTo(x - 5, y + 15);
pen.lineTo(x + 5, y + 10);
pen.lineTo(x - 5, y + 5);
}
function drawe(pen, x, y) {
pen.moveTo(x + 5, y + 10);
pen.arc(x, y + 10, 5, 0, 2 * Math.PI, false);
pen.moveTo(x - 5, y + 10);
pen.lineTo(x + 5, y + 10);
}
function drawf(pen, x, y) {
pen.moveTo(x + 5, y);
pen.lineTo(x, y);
pen.lineTo(x, y + 20);
pen.moveTo(x, y + 10);
pen.lineTo(x + 5, y + 10);
}
function drawg(pen, x, y) {
pen.moveTo(x + 5, y + 5);
pen.arc(x, y + 10, 5, -Math.PI / 2, Math.PI / 2, false);
pen.lineTo(x, y + 15);
pen.lineTo(x + 5, y + 15);
}
function drawh(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x - 5, y + 20);
pen.moveTo(x - 5, y + 10);
pen.arc(x - 5, y + 15, 5, -Math.PI / 2, Math.PI / 2, false);
}
function drawi(pen, x, y) {
pen.moveTo(x, y);
pen.lineTo(x, y + 10);
pen.moveTo(x, y + 15);
pen.lineTo(x, y + 20);
}
function drawj(pen, x, y) {
pen.moveTo(x, y);
pen.lineTo(x, y + 10);
pen.moveTo(x, y + 15);
pen.arc(x - 5, y + 15, 5, 0, Math.PI, true);
}
function drawk(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x - 5, y + 20);
pen.moveTo(x - 5, y + 10);
pen.lineTo(x + 5, y);
pen.moveTo(x - 5, y + 10);
pen.lineTo(x + 5, y + 20);
}
function drawl(pen, x, y) {
pen.moveTo(x, y);
pen.lineTo(x, y + 20);
}
function drawm(pen, x, y) {
pen.moveTo(x - 5, y + 10);
pen.lineTo(x - 5, y + 20);
pen.moveTo(x - 5, y + 10);
pen.lineTo(x, y + 15);
pen.lineTo(x + 5, y + 10);
pen.lineTo(x + 5, y + 20);
}
function drawn(pen, x, y) {
pen.moveTo(x - 5, y + 10);
pen.lineTo(x - 5, y + 20);
pen.moveTo(x - 5, y + 10);
pen.lineTo(x + 5, y + 15);
pen.lineTo(x + 5, y + 20);
}
function drawo(pen, x, y) {
pen.moveTo(x + 5, y + 10);
pen.arc(x, y + 10, 5, 0, 2 * Math.PI, false);
}
function drawp(pen, x, y) {
pen.moveTo(x - 5, y + 10);
pen.lineTo(x - 5, y + 20);
pen.moveTo(x - 5, y + 10);
pen.lineTo(x + 5, y + 15);
pen.lineTo(x - 5, y + 20);
}
function drawq(pen, x, y) {
pen.moveTo(x + 5, y + 10);
pen.arc(x, y + 10, 5, 0, 2 * Math.PI, false);
pen.moveTo(x, y + 15);
pen.lineTo(x + 5, y + 20);
}
function drawr(pen, x, y) {
pen.moveTo(x - 5, y + 10);
pen.lineTo(x - 5, y + 20);
pen.moveTo(x - 5, y + 10);
pen.lineTo(x + 5, y + 10);
}
function draws(pen, x, y) {
pen.moveTo(x + 5, y);
pen.arc(x, y + 5, 5, 1.5 * Math.PI, 0.5 * Math.PI, false);
pen.moveTo(x - 5, y + 10);
pen.arc(x, y + 15, 5, 1.5 * Math.PI, 0.5 * Math.PI, true);
}
function drawt(pen, x, y) {
pen.moveTo(x, y);
pen.lineTo(x, y + 20);
pen.moveTo(x - 5, y + 10);
pen.lineTo(x + 5, y + 10);
}
function drawu(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x - 5, y + 10);
pen.arc(x, y + 10, 5, Math.PI, 2 * Math.PI, false);
pen.lineTo(x + 5, y);
}
function drawv(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x, y + 10);
pen.lineTo(x + 5, y);
}
function draww(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x - 3, y + 10);
pen.lineTo(x, y + 5);
pen.lineTo(x + 3, y + 10);
pen.lineTo(x + 5, y);
}
function drawx(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x + 5, y + 10);
pen.moveTo(x + 5, y);
pen.lineTo(x - 5, y + 10);
}
function drawy(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x, y + 10);
pen.lineTo(x + 5, y);
pen.moveTo(x, y + 10);
pen.lineTo(x, y + 15);
pen.arc(x - 5, y + 15, 5, 0, Math.PI, true);
}
function drawz(pen, x, y) {
pen.moveTo(x - 5, y);
pen.lineTo(x + 5, y);
pen.lineTo(x - 5, y + 10);
pen.lineTo(x + 5, y + 10);
}
}
</script>
</body>
</html>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录