一,canvas绘图
1,canvas标签
在网页中创建一个画布
<canvas id="canvas" width="400" height="300"> </canvas>
<script>
var canvas = document.getElementById("canvas");
//绘制环境
var context = canvas.getContext('2d');
</script>
2,绘制线条
初始位置:moveTo( x,y )
连接端点:lineTo( x,y)
描边:通过初始位置和连线端点可以绘制一条线,但这条线并不能被看到。这时我们需要为线添加描边,让线变得可见。使用stroke()方法
<canvas width="500px" height="300px" id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d")
//初始位置
context.moveTo(x,y)
//连接端点
context.lineTo(x,y)
//描边
context.stroke()
</script>
3,线条样式
线条宽度 lineWidth
线条颜色 strokeStyle
端点形状 lineCap
lineCap 属性的取值有3个:
-
butt(默认值):默认效果,无端点,显示直线方形边缘
-
round:显示圆形端点
-
square:显示方形端点
填充颜色 fillStyle
颜色填充 fill()
<canvas width="500px" height="300px" id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d")
context.moveTo(10, 10)
context.lineTo(10, 200)
context.lineTo(150, 200)
//背景颜色
context.fillStyle = "yellow"
//背景填充
context.fill()
//边框颜色
context.strokeStyle = "red"
context.stroke()
</script>
4,线条的路径
重置路径
在同一画布中,即使我们添加再多的连线端点也只能有一条路径,如果想要开始新的路径就需要使用beginPath()方法,当出现beginPath()时即表示路径重新开始。
<canvas width="500px" height="300px" id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d")
context.moveTo(10, 10)
context.lineTo(200, 10)
context.stroke()
// 新建一条路径beginPath()
context.beginPath()
context.moveTo(10, 50)
context.lineTo(200, 50)
context.stroke()
</script>
闭合路径
闭合路径就是将我们绘制的开放路径进行封闭处理,多点的路径闭合后会形成特定的形状。在画布中使用closePath()方法闭合路径。
<canvas width="500px" height="300px" id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d")
context.moveTo(10, 10)
context.lineTo(10, 200)
context.lineTo(150, 200)
// 闭合路径
context.closePath()
context.stroke()
</script>
5,canvas绘制图形基本步骤
① 创建画布:<canvas></canvas>
② 准备画笔(获取上下文对象):canvas.getContext('2d');
③ 开始路径规划 :context.beginPath();
④ 移动起始点 :context.moveTo(x, y);
⑤ 绘制线(矩形、圆形、图片...):context.lineTo(x, y);
⑥ 闭合路径:context.closePath();
⑦ 绘制描边 :context.stroke();
二,canvas常用方法
绘制图形 | 方法 | 描述 |
---|---|---|
矩形 | rect() | 创建矩形。 |
fillRect() | 绘制带填充的矩形。 | |
strokeRect() | 绘制无填充的矩形。 | |
clearRect() | 在给定的矩形内清除指定的像素。 | |
圆形 | arc() | 创建圆形。 |
椭圆形 | ellipse() | 创建椭圆形。 |
文本 | strokeText() | 绘制空心文本。 |
fillText() | 绘制实心文本。 | |
图像 | drawImage() | 绘制图像。 |
1,绘制矩形
<canvas id="canvas" width="400" height="300">
您的浏览器不支持canvas标签,请更新浏览器
</canvas>
<script>
var canvas = document.getElementById('canvas'); // 获取canvas标签
var context = canvas.getContext('2d'); // 获得context对象
context.fillStyle = 'red'; // 设置填充颜色
context.fillRect(0,0,200,100); // 绘制填充的矩形
</script>
2,绘制圆形
<canvas id="canvas" width="400" height="300">
您的浏览器不支持canvas标签,请更新浏览器
</canvas>
<script>
var canvas = document.getElementById('canvas'); // 获取canvas标签
var context = canvas.getContext('2d'); // 获得context对象
context.arc(100, 100, 50, 0, 360 * Math.PI / 180); // 绘制圆形
context.stroke(); // 描边
</script>
3,绘制椭圆
<canvas id="canvas" width="400" height="300">
您的浏览器不支持canvas标签,请更新浏览器
</canvas>
<script>
var canvas = document.getElementById('canvas'); // 获取canvas标签
var context = canvas.getContext('2d'); // 获得context对象
context.ellipse(120, 100, 100, 50, 0, 0, 360 * Math.PI / 180); // 绘制椭圆
context.stroke(); // 描边
</script>
4,渐变
有两种方式来设置 Canvas 渐变:
-
createLinearGradient(x, y, x1, y1)
:创建线条渐变; -
createRadialGradient(x, y, r, x1, y1, r1)
:创建一个径向/圆渐变。
<canvas id="canvas" width="400" height="300">
您的浏览器不支持canvas标签,请更新浏览器
</canvas>
<script>
var canvas = document.getElementById('canvas'); // 获取canvas标签
var context = canvas.getContext('2d'); // 获得context对象
var gradient = context.createLinearGradient(0, 0, 200, 0); // 创建渐变
gradient.addColorStop(0, 'red'); // 设置渐变颜色(开始)
gradient.addColorStop(1, 'green'); // 设置渐变颜色(结束)
context.fillStyle = gradient; // 设置渐变填充样式
context.fillRect(10, 10, 200, 80); // 绘制矩形
</script>
三,SVG绘制基本图形
SVG 英文全称为 Scalable Vector Graphics,意思为可缩放的矢量图。
1,绘制矩形
使用 rect 标签,主要属性:
-
x/y:绘图位置,
-
width/height:矩形长宽,
-
fill:填充颜色,默认黑色,
-
stroke:描边的颜色。
-
stroke-width:描边的宽度。
-
rx/ry:描边的圆角。
-
<svg width="500" height="500"> <rect x="100" y="100" width="150" height="100" fill="red" stroke="green" stroke-width="2" rx="10"></rect> </svg>
2,绘制圆
-
使用专门的标签circle 绘制,主要属性:
-
cx/cy:圆绘制的位置,圆心位置。
-
r:圆的半径。
<svg width="500" height="500">
<circle cx="150" cy="200" r="50"></circle>
</svg>
3,绘制椭圆
使用专门的标签ellipse 绘制,主要属性:
-
cx/cy:椭圆绘制的位置,圆心的位置。
-
rx/ry:椭圆的半径。
<svg width="500" height="500">
<ellipse cx="150" cy="400" rx="50" ry="25"></ellipse>
</svg>
四,SVG绘制多边
1,绘制直线
-
x1/y1:起点
-
x2/y2:终点
-
stroke:线条颜色,必须有
<svg width="500" height="500">
<line x1="100" y1="100" x2="200" y2="100" stroke="red"></line>
</svg>
2,绘制折线
-
points:设置所有折线的点。
-
fill:是否填充,默认填充。
<svg width="500" height="500">
<polyline points="100 150 300 150 300 200" stroke="red" fill="none"></polyline>
</svg>
3,绘制多边形
polygon 会自动关闭路径。
<svg width="500" height="500">
<polygon points="100 400 300 400 300 450" stroke="red" fill="none"></polygon>
</svg>