Canvas绘制简单图形
Canvas简单使用
canvas元素本省并不能实现图形绘制功能，绘制图形的工作需要有JavaScript来完成。
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" style="border:1px solid;" width="200" height="100"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
context.fillStyle="#ff00ff";
context.fillRect(50,25,100,50);
</script>
</body>
</html>
绘制直线
moveTo,lineTo,stroke。
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" style="border:1px solid;" width="200" height="100"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
context.moveTo(0,0);
context.lineTo(200,100);
context.stroke();
</script>
</body>
</html>
绘制直线
fillStyle="#FF00FF";fillRect(0,0,200,100);绘制实心矩形
strokeStyle="#ffffff";strokeRect(0,0,100,50);绘制矩形轮廓
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" style="border:1px solid;" width="300" height="150"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
context.fillStyle="#ff00ff";
context.fillRect(0,0,200,100);
context.strokeStyle="#ffffff";
context.strokeRect(0,0,100,50);
</script>
</body>
</html>
以下表示颜色的方式等价
fillStyle="#FF0000";
fillStyle="red";
fillStyle="rgb(255,0,0)";
fillStyle="rgb(100%,0%,0%)";
fillStyle="rgba(255,0,0,1)";
绘制圆形
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" style="border:1px solid;" width="300" height="150"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
context.fillStyle="#ff00ff";
context.beginPath();
context.arc(100,75,50,0,Math.PI*2,true);
context.closePath();
context.fill();
</script>
</body>
</html>
context.arc(x,y,radius,startAngle,endAngle,anticlockwise);anticlockwise表示是否按照顺时针方向绘制。
下面的示例帮助你更好的理解
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" style="border:1px solid;" width="300" height="150"></canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
for (var i = 0; i < 15; i++) {
context.strokeStyle = "#FF00FF";
context.beginPath();
context.arc(0, 150, i * 10, 0, Math.PI * 3 / 2, true);
context.closePath();
context.stroke();
}
</script>
</body>
</html>
你可以去掉context.closePath();看一下有什么变化
绘制三角形
- 实心三角形
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" style="border:1px solid;" width="300" height="150"></canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.fillStyle="red";
context.beginPath();
context.moveTo(25,25);
context.lineTo(150,25);
context.lineTo(25,150);
context.closePath();
context.fill();
</script>
</body>
</html>
- 空心三角形
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" style="border:1px solid;" width="300" height="150"></canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.strokeStyle="red";
context.beginPath();
context.moveTo(25,25);
context.lineTo(150,25);
context.lineTo(25,150);
context.closePath();
context.stroke();
</script>
</body>
</html>
清空画布
context.clearRect(x,y,width,height);
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<script type="text/javascript">
function clearMap() {
context.clearRect(0, 0, 300, 200);
}
</script>
<body>
<canvas id="myCanvas" style="border:1px solid;" width="300" height="200">
</canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.strokeStyle = "#FF00FF";
context.beginPath();
context.arc(200, 150, 100, -Math.PI * 1 / 6, -Math.PI * 5 / 6, true);
context.stroke();
</script>
<input name="" type="button" value="清空画布" onclick="clearMap();">
</body>
</html>
绘制贝塞尔曲线
绘制二次方贝塞尔曲线
context.quadraticCurveTo(cp1x,cp1y,x,y);
其中参数cp1x，和cp1y是控制点的坐标，x和y是终点坐标。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<canvas id="myCanvas" style="border:1px solid;" width="300" height="200">
</canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.strokeStyle = "dark";
context.beginPath();
context.moveTo(0,200);
context.quadraticCurveTo(75,50,300,200);
context.stroke();
context.globalCompositeOperation="source-over";
context.strokeStyle="#FF00FF";
context.beginPath();
context.moveTo(75,50);
context.lineTo(0,200);
context.moveTo(75,50);
context.lineTo(300,200);
context.stroke();
</script>
</body>
</html>
绘制三次方贝塞尔曲线
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
其中参数cp1x，和cp1y是第一个控制点的坐标，参数cp2x，和cp2y是第二个控制点的坐标，x和y是终点坐标。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<canvas id="myCanvas" style="border:1px solid;" width="300" height="200">
</canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.strokeStyle = "dark";
context.beginPath();
context.moveTo(0,200);
context.bezierCurveTo(25,50,75,50,300,200);
context.stroke();
context.globalCompositeOperation="source-over";
context.strokeStyle="#FF00FF";
context.beginPath();
context.moveTo(25,50);
context.lineTo(0,200);
context.moveTo(75,50);
context.lineTo(300,200);
context.stroke();
</script>
</body>
</html>
图形的变换
保存与回复Canvas状态
context.save();
context.restore();
你可以尝试删除context.restore()，对比一下前后的差别
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<canvas id="myCanvas" style="border:1px solid;" width="300" height="200">
</canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.fillStyle="#ff00ff";
context.strokeStyle="blue";
context.fillRect(20,20,100,100);
context.strokeRect(20,20,100,100);
context.fill();
context.stroke();
context.save();
context.fillStyle="#ff0000";
context.strokeStyle="green";
context.fillRect(140,20,100,100);
context.strokeRect(140,20,100,100);
context.fill();
context.stroke();
context.restore();
context.fillRect(20,140,50,50);
context.strokeRect(80,140,50,50);
</script>
</body>
</html>
移动坐标空间
context.translate(dx,dy);移动坐标原点在屏幕中的位置默认左上角(0,0)移动一次之后原点(dx,dy);
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
function drawTop(ctx,fillStyle) {
ctx.fillStyle=fillStyle;
ctx.beginPath();
ctx.arc(0,0,30,0,Math.PI,true);
ctx.closePath();
ctx.fill();
}
function drawGrip(ctx) {
ctx.save();
ctx.fillStyle="blue";
ctx.fillRect(-1.5,0,1.5,40);
ctx.beginPath();
ctx.strokeStyle="blue";
ctx.arc(-5,40,4,Math.PI,Math.PI*2,true);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
function draw() {
var ctx=document.getElementById("myCanvas").getContext("2d");
ctx.translate(80,80);
for(var i=0;i<10;i++){
ctx.save();
ctx.translate(60*i,0);
drawTop(ctx,"rgb("+(30*i)+","+(255-30*i)+",255)")
drawGrip(ctx);
ctx.restore();
}
}
window.onload=function () {
draw();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="700" height="300">
</canvas>
</body>
</html>
旋转坐标空间
context.rotate(angle);用于以原点为中心旋转Canvas
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
function drawTop(ctx,fillStyle) {
ctx.fillStyle=fillStyle;
ctx.beginPath();
ctx.arc(0,0,30,0,Math.PI,true);
ctx.closePath();
ctx.fill();
}
function drawGrip(ctx) {
ctx.save();
ctx.fillStyle="blue";
ctx.fillRect(-1.5,0,1.5,40);
ctx.beginPath();
ctx.strokeStyle="blue";
ctx.arc(-5,40,4,Math.PI,Math.PI*2,true);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
function draw() {
var ctx=document.getElementById("myCanvas").getContext("2d");
ctx.translate(150,150);
for(var i=0;i<10;i++){
ctx.save();
ctx.rotate(Math.PI*(2/4+i/4));
ctx.translate(0,-100);
drawTop(ctx,"rgb("+(30*i)+","+(255-30*i)+",255)");
drawGrip(ctx);
ctx.restore();
}
}
window.onload=function () {
draw();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="700" height="300">
</canvas>
</body>
</html>
缩放图形
context.scale(x,y);
x,为横轴的缩放因子，y为纵轴的缩放因子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
function draw() {
var ctx=document.getElementById("myCanvas").getContext("2d");
ctx.translate(200,20);
for(var i=0;i<80;i++){
ctx.save();
ctx.translate(30,30);
ctx.scale(0.95,0.95);
ctx.rotate(Math.PI/12);
ctx.beginPath();
ctx.fillStyle="red";
ctx.globalAlpha="0.4";
ctx.arc(0,0,50,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
}
}
window.onload=function () {
draw();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="700" height="300">
</canvas>
</body>
</html>
矩阵变换
transform方法用于直接对变形矩阵作修改
- 矩阵移动
context.transform(0,1,1,0,dx,dy);
或
context.transform(1,0,0,1,dx,dy); - 缩放
context.transform(m11,0,0,m22,0,0);
或
context.transform(0,m12,m21,0,0,0);
对应的结果
x'=(m11)x
y'=(m22)y;
或
x'=(m12)x
y'=(m21)y;
- 旋转
context.transform(cosθ,sinθ,-sinθ,cosθ,0,0);
x'=x*cosθ-y*sinθ
y'=x*sinθ+y*cosθ
context.setTransform(m11,m12,m21,m22,dx,dy);
setTransform用于将当前的变换矩阵重置为最初的矩阵，然后以相同的参数调用transform方法，即先set(重置)再transform(变换)。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
function draw() {
var ctx=document.getElementById("myCanvas").getContext("2d");
ctx.translate(200,20);
for(var i=0;i<90;i++){
ctx.save();
ctx.transform(0.95,0,0,0.95,30,30);
ctx.rotate(Math.PI/12);
ctx.beginPath();
ctx.fillStyle="red";
ctx.globalAlpha="0.4";
ctx.arc(0,0,50,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
}
ctx.setTransform(1,0,0,1,10,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,50,50);
ctx.fill();
}
window.onload=function () {
draw();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="700" height="300">
</canvas>
</body>
</html>
图形的组合与裁切
图形的组合
通过指定图形globalCompositeOperation属性的值改变重叠图形的绘制顺序与绘制方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<canvas id="myCanvas" width="700" height="300" style="border:1px solid;"></canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.fillStyle = "red";
context.fillRect(50, 25, 100, 100);
context.fillStyle = "green";
context.globalCompositeOperation = "source-over";
context.beginPath();
context.arc(150, 125, 50, 0, Math.PI * 2, true);
context.closePath();
context.globalAlpha="0.5";
context.fill();
</script>
</body>
</html>
globalCompositeOperation属性所有可用的值
| 属性值 | 说明 |
|---|---|
| source-over(默认值) | A over B，这是默认设置，即新图形覆盖再原有内容上 |
| destination-over | B over A，即原有内容覆盖在新图形上 |
| source-atop | 只绘制原有内容和新图形与原有内容重叠的部分，且新图形位于原有内容之上 |
| destination-atop | 只绘制新图形和新图形与原有内容重叠的部分，且原有内容位于重叠部分之下 |
| source-in | 新图形只出现再原有内容重叠的部分，其余区域变为透明 |
| destination-in | 原有内容只出现在与新图形重叠的部分，其余区域为透明 |
| source-out | 新图形中与原有内容不重叠的部分被保留 |
| destination-out | 原有内容中与新图形不重叠的部分被保留 |
| lighter | 两图形重叠的部分作加色处理 |
| darker | 两图形重叠的部分作减色处理 |
| copy | 只保留新图形，在Chrome浏览器中无效，Opera11.5中有效 |
| xor | 将重叠的部分变为透明 |
裁切路径
clip方法用于裁切路径
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<canvas id="myCanvas" width="700" height="300" style="border:1px solid;"></canvas>
<script type="text/javascript">
function draw() {
var ctx=document.getElementById("myCanvas").getContext("2d");
ctx.fillStyle="black";
ctx.fillRect(0,0,300,300);
ctx.fill();
ctx.beginPath();
ctx.arc(150,150,130,0,Math.PI*2,true);
ctx.clip();
ctx.translate(200,20);
for(var i=0;i<90;i++){
ctx.save();
ctx.transform(0.95,0,0,0.95,30,30);
ctx.rotate(Math.PI/12);
ctx.beginPath();
ctx.fillStyle="red";
ctx.globalAlpha="0.4";
ctx.arc(0,0,50,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
}
}
window.onload=function () {
draw();
}
</script>
</body>
</html>
更多的颜色和样式选项
应用不同的线型
lineWidth=value
lineCap=type
lineJoin=type
lineLimit=value
- lineWidth(设置线条的粗细)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lineSet</title>
<script language="JavaScript">
function draw() {
var ctx=document.getElementById("myCanvas").getContext("2d");
for(var i=0;i<12;i++){
ctx.strokeStyle="red";
ctx.lineWidth=1+i;
ctx.beginPath();
ctx.moveTo(5,5+i*14);
ctx.lineTo(140,5+i*14);
ctx.stroke();
}
}
window.onload=function () {
draw();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>
- lineCap(设置端点样式)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script language="JavaScript">
function draw() {
var ctx=document.getElementById('myCanvas').getContext('2d');
var lineCap=['butt','round','square'];
ctx.strokeStyle='red';
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(10,150);
ctx.moveTo(150,10);
ctx.lineTo(150,150);
ctx.stroke();
ctx.strokeStyle='blue';
for(var i=0;i<lineCap.length;i++){
ctx.lineWidth=20;
ctx.lineCap=lineCap[i];
ctx.beginPath();
ctx.moveTo(10,30+i*50);
ctx.lineTo(150,30+i*50);
ctx.stroke();
}
}
window.onload=function () {
draw();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="300"></canvas>
</body>
</html>
- lineJoin(设置连接处样式)
round,bevel,miter默认miter。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script language="JavaScript">
function draw() {
var ctx=document.getElementById('myCanvas').getContext('2d');
var lineJoin=['round','bevel','miter'];
ctx.strokeStyle='blue';
for (var i=0;i<lineJoin.length;i++){
ctx.lineWidth=25;
ctx.lineJoin=lineJoin[i];
ctx.beginPath();
ctx.moveTo(10+i*150,30);
ctx.lineTo(100+i*150,30);
ctx.lineTo(100+i*150,100);
ctx.stroke();
}
}
window.onload=function () {
draw();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="300"></canvas>
</body>
</html>
- miterLimit(设置绘制焦点的方式)
miterLimit属性的值用于设置两条线段链接处焦点的绘制方式，当宽线条使用lineJoin属性并将其值设置为miter时，如果绘制两条线断并以锐角相交，所得到的斜面可能会非常长。miterLimit的作用是为斜面的长度设置一个上限，默认为10，即规定斜面的长度不能超过线宽的10倍。当lineJoin属性为其他事，该值无效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script language="JavaScript">
function draw() {
var ctx=document.getElementById('myCanvas').getContext('2d');
for(var i=0;i<10;i++){
ctx.strokeStyle='blue';
ctx.lineWidth=10;
ctx.lineJoin='miter';
ctx.miterLimit=i*10;
ctx.beginPath();
ctx.moveTo(10,i*30);
ctx.lineTo(100,i*30);
ctx.lineTo(10,33*i);
ctx.stroke();
}
}
window.onload=function () {
draw();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="300"></canvas>
</body>
</html>
绘制线型渐变
context.createLinearGradient(x1,y1,x2,y2);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script language="JavaScript">
function draw() {
var ctx=document.getElementById('myCanvas').getContext('2d');
var lingrad=ctx.createLinearGradient(0,0,0,200);
lingrad.addColorStop(0,'#ff0000');
lingrad.addColorStop(1/7,'#ff9900');
lingrad.addColorStop(2/7,'#ffff00');
lingrad.addColorStop(3/7,'#00ff00');
lingrad.addColorStop(4/7,'#00ffff');
lingrad.addColorStop(5/7,'#0000ff');
lingrad.addColorStop(6/7,'#ff00ff');
lingrad.addColorStop(1,'#ff0000');
ctx.fillStyle=lingrad;
ctx.strokeStyle=lingrad;
ctx.fillRect(10,10,200,200);
}
window.onload=function () {
draw();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="300"></canvas>
</body>
</html>
绘制径向渐变
context.createRadialGradient(x1,y1,r1,x2,y2,r2);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script language="JavaScript">
function draw() {
var ctx=document.getElementById('myCanvas').getContext('2d');
var radgrad=ctx.createRadialGradient(55,55,20,100,100,90);
radgrad.addColorStop(0,'#ffffff');
radgrad.addColorStop(0.75,'#333333');
radgrad.addColorStop(1,'#000000');
ctx.fillStyle=radgrad;
ctx.fillRect(10,10,200,200);
}
window.onload=function () {
draw();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="300"></canvas>
</body>
</html>
绘制图案
context.createPattern(image,type);
repeat:同时沿x轴y轴方向平铺
repeat-x:沿x轴方向平铺
repeat-y:沿y轴方向平铺
no-repeat:不平铺
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script language="JavaScript">
function draw() {
var ctx=document.getElementById('myCanvas').getContext('2d');
var img=new Image();
img.src='images/logo.jpg';
img.onload=function () {
var ptrn=ctx.createPattern(img,'repeat');
ctx.fillStyle=ptrn;
ctx.fillRect(0,0,1800,1800);
}
}
window.onload=function () {
draw();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="1800" height="1800"></canvas>
</body>
</html>
设置图形的透明度
rgba(R,G,B,A);
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
function draw() {
var ctx=document.getElementById("myCanvas").getContext("2d");
ctx.translate(200,20);
for(var i=0;i<90;i++){
ctx.save();
ctx.transform(0.95,0,0,0.95,30,30);
ctx.rotate(Math.PI/12);
ctx.beginPath();
ctx.fillStyle='rgba(255,0,0,'+(1-(i+10)/40)+')';
ctx.arc(0,0,50,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
}
}
window.onload=function () {
draw();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="700" height="300">
</canvas>
</body>
</html>
创建阴影
context.shadowOffsetX=float;
context.shadowOffsetY=float;
context.shadowBlur=float;
context.shadowColor=color;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<script language="JavaScript">
function draw() {
var ctx=document.getElementById('myCanvas').getContext('2d');
ctx.shadowOffsetX=3;
ctx.shadowOffsetY=3;
ctx.shadowBlur=2;
ctx.shadowColor='rgba(0,0,0,0.5)';
ctx.fillStyle="#33ccff";
ctx.fillRect(20,20,300,60);
ctx.fill();
ctx.font="45px 黑体";
ctx.fillStyle="white";
ctx.fillText("HTML5+CSS3",30,64);
}
window.onload=function () {
draw();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
</body>
</html>
绘制文字
绘制填充文字
context.fillText(text,x,y,[maxWidth]);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas id="myCanvas" width="350" height="200" style="border: 1px solid;"></canvas>
<script language="JavaScript">
var ctx=document.getElementById("myCanvas").getContext('2d');
ctx.font="italic 35px 黑体";
ctx.fillStyle="Red";
ctx.fillText("绘制填充文字",30,60,200);
ctx.font="bold 35px 宋体";
ctx.fillStyle="Blue";
ctx.fillText("绘制填充文字",30,100);
ctx.font="25px 隶书";
ctx.fillStyle="Green";
ctx.fillText("绘制填充文字",30,130);
</script>
</body>
</html>
文字相关属性
font;textAlign;textBaseline;
绘制轮廓字体
context.strokeText(text,x,y,[maxWidth]);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas id="myCanvas" width="350" height="200" style="border: 1px solid;"></canvas>
<script language="JavaScript">
var ctx=document.getElementById("myCanvas").getContext('2d');
ctx.font="italic 35px 黑体";
ctx.strokeStyle="Red";
ctx.strokeText("绘制填充文字",30,60,200);
ctx.font="bold 35px 宋体";
ctx.strokeStyle="Blue";
ctx.strokeText("绘制填充文字",30,100);
ctx.font="25px 隶书";
ctx.strokeStyle="Green";
ctx.strokeText("绘制填充文字",30,130);
</script>
</body>
</html>
测量文字宽度
metrics=context.measureText(text);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas id="myCanvas" width="350" height="200" style="border: 1px solid;"></canvas>
<script language="JavaScript">
var ctx=document.getElementById("myCanvas").getContext('2d');
ctx.font="bold 20px 楷体";
ctx.fillStyle="Blue";
var txt1="滚滚长江东逝水，浪花淘尽英雄。";
ctx.fillText(txt1,10,40);
var txt2="以上字符串的宽度为：";
var mtxt1=ctx.measureText(txt1);
var mtxt2=ctx.measureText(txt2);
ctx.font="bold 15px 宋体";
ctx.fillStyle="Red";
ctx.fillText(txt2,10,80);
ctx.fillText(mtxt1.width,mtxt2.width,80);
</script>
</body>
</html>
网友评论