HTML5学习第18篇——绘制虚线、文本、图片
1、绘制虚线
setLineDash（数组）
<canvas width="800" height="600"></canvas>
<script type="text/javascript">
var c = document.querySelector('canvas');
var ctx = c.getContext("2d");
ctx.moveTo(100,100);
ctx.lineTo(600,100);
//绘制虚线，参数是一个数组（线长，空白长）
//ctx.setLineDash([10,10]);
//ctx.setLineDash([20,10]);
//按照线、空、线、空、线、空的格式，循环使用10,5,20这三个数进行填充
//例如：线10、空5、线20、空10、线5、空20...
ctx.setLineDash([10,5,20]);
//ctx.setLineDash([10,5,20,5]);
ctx.stroke();
</script>2、绘制文本
- 方法
| 方法 | 描述 |
|---|---|
| fillText() | 在画布上绘制“被填充的”文本 |
| strokeText() | 在画布上绘制文本（无填充） |
- 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas 绘制文本</title>
<style type="text/css">
canvas{
border:1px solid black;
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script type="text/javascript">
var c = document.querySelector('canvas');
var ctx = c.getContext("2d");
//绘制画布中心线
ctx.moveTo(300, 0);
ctx.lineTo(300, 400);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0, 200);
ctx.lineTo(600,200);
ctx.stroke();
//设置文本的字号和字体
ctx.font = "50px Arial";
//设置字体的水平对齐方式
ctx.textAlign = "center";
ctx.textBaseline = "middle";
//设置阴影的颜色
ctx.shadowColor="red";
//水平方向偏移量
ctx.shadowOffsetX=15;
ctx.shadowOffsetY=5;
//阴影的模糊度
ctx.shadowBlur=5;
ctx.strokeText("Hello World",300,200);
//ctx.fillText("Hello World",300,200);
</script>
</body>
</html>- 示例效果
3、绘制图片
| 方法 | 描述 |
|---|---|
| drawImage() | 向画布上绘制图像、画布或视频 |
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas 绘制图片</title>
<style type="text/css">
canvas{
border:1px solid black;
}
</style>
</head>
<body>
<p>要使用的图像</p>
<img src="../images/1.jpg">
<p>画布</p>
<canvas width="800" height="600"></canvas>
<script type="text/javascript">
var c = document.querySelector('canvas');
var ctx = c.getContext("2d");
var img = document.querySelector('img');
img.onload=function (){
/*
img 规定要使用的图像、画布或视频。
sx 可选。开始剪切的 x 坐标位置。
sy 可选。开始剪切的 y 坐标位置。
swidth 可选。被剪切图像的宽度。
sheight 可选。被剪切图像的高度。
x 在画布上放置图像的 x 坐标位置。
y 在画布上放置图像的 y 坐标位置。
width 可选。要使用的图像的宽度。（伸展或缩小图像）
height 可选。要使用的图像的高度。（伸展或缩小图像）
*/
//drawImage(img,x,y)
//ctx.drawImage(img,10,10);
//实现图片的缩放
//ctx.drawImage(img,10,10,400,200);
//实现图片的裁剪
ctx.drawImage(img,100,100,400,200,10,10,400,200);
}
</script>
</body>
</html>效果图如下：