H5画布绘制文本
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>
