canvas标签类似img，可以设置 width 属性和 height 属性，如果没有设置，canvas 画布的默认宽高是 300 * 150。下面来介绍一些 canvas 的常规操作吧.
1. 使用 canvas 画一个矩形
代码如下
<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<script>
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext('2d'); /* 创建 context 对象 */
ctx.fillStyle = "red"; /* 填充颜色 */
ctx.fillRect(0,0, 100, 50);/* 4个参数分别是 x y 水平方向和垂直方向,是从左顶点(0, 0)开始的, w h 是绘制的矩形的宽和高了 */
</script>
image
效果如图所示
image
2. 使用 canvas 画一条线
代码如下
<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<script>
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext('2d'); /* 创建 context 对象 */
ctx.moveTo(0, 0); /* 是线开始的坐标 参数是 x y 水平方向和垂直方向*/
ctx.lineTo(100, 100); /* 是线条结束坐标 参数如上 */
ctx.stroke(); /* 开始描绘线 */
</script>
效果如图所示
image
那么想要的不是一条直线呢,我们可以在描绘线前继续写 ctx.lineTo(); 就行啦,参数一样的,然后在进行描绘
3. 使用 canvas 画一个圆
代码如下
<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<script>
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext('2d'); /* 创建 context 对象 */
ctx.beginPath(); /* 定义绘制的是一个圆 */
/*
分别有六个参数 前两个依然是 x 和 y 的是不同的是不是从绘制的图形的左顶点坐位开始的位置了,而是以圆心作为坐标
第三个是 r 是绘制圆的半径
第四个是起始角 从 0 度开始绘制,
第五个是结束角，2 * Math.PI 是360度的弧度角,半圆的话是(ctx.arc(60, 60, 30, 0, 1 * Math.PI, true))
第六个是逆时针还是顺时针 False 为顺时针，true 为逆时针。
*/
ctx.arc(30, 30, 30, 0, 2 * Math.PI, false);
ctx.stroke();
</script>
image
如果需要填充颜色的话需要将 ctx.stroke() 改为
ctx.fillStyle = "red";
ctx.closePath();
ctx.fill();
效果如图
image
4. canvas 绘制文本
代码如下
<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<script>
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext('2d'); /* 创建 context 对象 */
ctx.font = "40px 楷体"; /* 40px 是文字的大小 后面的是文字的字体(其他参数建议查询) */
ctx.fillText('我是一段文字', 10, 60);/* 第一个是文本的内容,后两个是 x y,最后一个是限制的文本的长度(以像素计) */
</script>
image
也可以使用 ctx.strokeText('我是一段文字', 10, 60);绘制不填充的文本如图所示
ctx.strokeStyle = "red";
ctx.strokeText('我是一段文字', 10, 60);
如图所示
image
5. canvas渐变
代码如下
<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<script>
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext('2d'); /* 创建 context 对象 */
/*
创建渐变 x0 渐变开始点的 x 坐标
y0 渐变开始点的 y 坐标
x1 渐变结束点的 x 坐标
y1 渐变结束点的 y 坐标
*/
let grd = ctx.createLinearGradient(0,0,200,0);
/*
第一个值是 介于0.0 和 1.0 之间值, 表示渐变的开始位置和结束位置
第二个是颜色
*/
grd.addColorStop(0, 'red');
grd.addColorStop(1, 'green');
/*填充颜色*/
ctx.fillStyle = grd;
/* 参数分别是 x y w h 水平方向 垂直方向 宽度 和 高度*/
ctx.fillRect(20, 20, 150, 100);
</script>
image
径向渐变 和 线性渐变的区别在在于创建时的参数不同 一个是 createLinearGradient() 一个是 createRadialGradient()
下面的是径向渐变
<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<script>
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext('2d'); /* 创建 context 对象 */
/*
x0 渐变的开始圆的 x 坐标
y0 渐变的开始圆的 y 坐标
r0 开始圆的半径
x1 渐变的结束圆的 x 坐标
y1 渐变的结束圆的 y 坐标
r1 结束圆的半径
*/
let grd = ctx.createRadialGradient(0, 0, 5, 0, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "blue");
ctx.fillStyle = grd;
ctx.fillRect(20, 20, 100, 80);
</script>
image
可以调试下参数,看看有哪些变化
6. canvas 填充图片
<img src="../avatar.jpg" width="300" height="260" alt="avatar">
<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<script>
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext('2d'); /* 创建 context 对象 */
var img = document.getElementsByTagName("img")[0];
img.onload = function() {
/*
第一个规定要使用的图像、画布或视频
第二个第三个是 x 和 y 轴的坐标
第四个和第五个是绘制图片的大小
*/
ctx.drawImage(img, 10, 10, 150, 100);
}
</script>
下面是使用的img 和 canvas 绘制绘制图片的效果 主要是 drawImage() 这个参数(建议查询)
image
网友评论