HTML5 - Canvas

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

Canvas 绘制图像

在使用 canvas 绘制图像时，canvas 画布左上角的坐标为(0, 0)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
    <!-- 创建 canvas 元素-->
    <canvas></canvas>
    <script type="text/javascript">
        // 获取 canvas 元素
        var canvas = document.querySelector("canvas");
        // 创建 context 对象，相当于打开了画图工具
        var context = canvas.getContext("2d");
        // 绘制图像
        ......
    </script>
</body>
</html>
改变 canvas 画布大小

注意：canvas 画布大小不可通过 css 来改变，只能通过属性方式设置，否则可能出现失帧的情况（当使用 css 方式改变 canvas 画布大小时，只是 cavas 标签的大小改变了，正真的绘图区域大小并没有改变，所以出现了失帧的情况）。

<canvas width="600" height="400"></canvas>
绘制直线
  • 将画笔的落点处移至坐标(x,y)处
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");

...
context.moveTo(x, y);
...
  • 创建一条从上一个指定坐标点到坐标(x,y)的线段
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");

...
context.lineTo(x, y);
...
  • 开始绘制
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");

...
context.stroke();
...

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
    <!-- 创建 canvas 元素-->
    <canvas width="1000" height="1000"></canvas>
    <script type="text/javascript">
        // 获取 canvas 元素
        var canvas = document.querySelector("canvas");
        // 创建 context 对象，相当于打开了画图工具
        var context = canvas.getContext("2d");
       
        // 将画笔的落点处定在坐标(100, 100)处
        context.moveTo(100, 100);
        // 创建一条画笔落点处到坐标(200, 200)的线段
        context.lineTo(200, 200);
        // 开始绘制
        context.stroke();
    </script>
</body>
</html>
绘制虚线
  • 设置实线部分与空白部分的长度
    注意：setLineDash()方法的参数为一个数组。
    1）参数是一个空数组，则表示绘制实线。
    2）参数为[a, b]，则元素 a 表示实线部分长度，元素 b 表示虚线部分长度
    3）参数为[a, b, c]，则元素 a 表示实线部分长度，元素 b 表示虚线部分长度，元素 c 表示实线部分长度，元素 a 表示虚线部分长度，元素 b 表示实线部分长度......，以此循环。
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");

...
context.setLineDash(数组);
...

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
    <!-- 创建 canvas 元素-->
    <canvas width="1000" height="1000"></canvas>
    <script type="text/javascript">
        // 获取 canvas 元素
        var canvas = document.querySelector("canvas");
        // 创建 context 对象，相当于打开了画图工具
        var context = canvas.getContext("2d");
       
        // 将画笔的落点处定在坐标(100, 100)处
        context.moveTo(100, 100);
        // 创建一条画笔落点处到坐标(200, 200)的线段
        context.lineTo(200, 200);
        // 设置实线部分长度为4，元虚线部分长度为6
        context.setLineDash([4, 6]);
        // 开始绘制
        context.stroke();
    </script>
</body>
</html>
绘制两条平行直线
  • 开启一个新的绘制图层
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");

...
context.beginPath();
...

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
    <!-- 创建 canvas 元素-->
    <canvas width="1000" height="1000"></canvas>
    <script type="text/javascript">
        // 获取 canvas 元素
        var canvas = document.querySelector("canvas");
        // 创建 context 对象，相当于打开了画图工具
        var context = canvas.getContext("2d");
       
        // 将画笔的落点处定在坐标(100, 100)处
        context.moveTo(100, 100);
        // 创建一条画笔落点处到坐标(300,100)的线段
        context.lineTo(300, 100);
        // 开始绘制
        context.stroke();

        // 开启新的图层
        context.beginPath();

        // 将画笔的落点处定在坐标(100, 150)处
        context.moveTo(100, 150);
        // 创建一条画笔落点处到坐标(300, 150)的线段
        context.lineTo(300, 150);
        // 开始绘制
        context.stroke();
    </script>
</body>
</html>
绘制一个三角形
  • 创建从当前点回到起始点的路径
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");

...
context.closePath();
...

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
    <!-- 创建 canvas 元素-->
    <canvas width="1000" height="1000"></canvas>
    <script type="text/javascript">
        // 获取 canvas 元素
        var canvas = document.querySelector("canvas");
        // 创建 context 对象，相当于打开了画图工具
        var context = canvas.getContext("2d");
       
        // 将画笔的落点处定在坐标(100, 100)处
        context.moveTo(100, 100);
        // 创建一条从上一个点(100, 100)到坐标(100,300)的线段
        context.lineTo(100, 300);
        // 创建一条从上一个点(100,300)到坐标(300,300)的线段
        context.lineTo(300, 300);
        // 创建从当前点(300,300)回到起始点(100, 100)的路径
        context.closePath()
        // 开始绘制
        context.stroke();
    </script>
</body>
</html>
线条样式
  • 设置线两端的样式
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");

...
// 默认值，设置线两端的样式为平直的边缘
context.lineCap = "butt" ;
// 设置线两端的样式为圆形线帽
context.lineCap = "round";
// 设置线两端的样式为正方形线帽
context.lineCap = "square";
...
  • 设置两条线相交时的连接样式
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");

...
// 默认值，设置两条线相交时的连接样式为尖角
context.lineJoin = "miter";
// 设置两条线相交时的连接样式为斜角
context.lineJoin = "bevel";
// 设置两条线相交时的连接样式为圆角
context.lineJoin = "round";
...
  • 设置画笔的颜色、渐变或模式
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");

...
context.strokeStyle = XXX;
...
  • 设置线宽（像素），不需要带单位
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");

...
context.lineWidth = XXX;

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
    <!-- 创建 canvas 元素-->
    <canvas width="1000" height="1000"></canvas>
    <script type="text/javascript">
        // 获取 canvas 元素
        var canvas = document.querySelector("canvas");
        // 创建 context 对象，相当于打开了画图工具
        var context = canvas.getContext("2d");
       
        // 设置线两端的样式为圆形线帽
        context.lineCap = "round";
        // 设置两条线相交时的连接样式为圆角
        context.lineJoin = "round";
        // 设置线条的颜色为红色
        context.strokeStyle = "red";
        // 设置线条的宽度
        context.lineWidth = "30";

        // 将画笔的落点处定在坐标(100, 100)处
        context.moveTo(100, 100);
        // 创建一条从上一个点(100, 100)到坐标(100,300)的线段
        context.lineTo(100, 300);
        // 开始绘制
        context.stroke();
    </script>
</body>
</html>
  • 设置两条线相交处内角与外角之间的距离
    注意：只有当 context.lineJoin = "miter" 时，才有效。边角的角度越小，斜接长度就会越大。 如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 样式来显示。
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");

...
context.miterLimit = XXX;
...

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
    <!-- 创建 canvas 元素-->
    <canvas width="1000" height="1000"></canvas>
    <script type="text/javascript">
        // 获取 canvas 元素
        var canvas = document.querySelector("canvas");
        // 创建 context 对象，相当于打开了画图工具
        var context = canvas.getContext("2d");
     
        // 设置线条的宽度
        context.lineWidth = "5";

        // 将画笔的落点处定在坐标(100, 100)处
        context.moveTo(100, 100);
        // 创建一条从上一个点(100, 100)到坐标(210,110)的线段
        context.lineTo(210,110);
        // 创建一条从上一个点(210,110)到坐标(100,120)的线段
        context.lineTo(100, 120);
        // 开始绘制
        context.stroke();

         // 开启新的图层
        context.beginPath();
        
        // 设置线条的宽度
        context.lineWidth = "5";
        // 设置两条线相交处内角与外角之间的距离
        context.miterLimit= "15"

        // 将画笔的落点处定在坐标(300, 100)处
        context.moveTo(300, 100);
        // 创建一条从上一个点(300, 100)到坐标(410,110)的线段
        context.lineTo(410,110);
        // 创建一条从上一个点(310,110)到坐标(300,320)的线段
        context.lineTo(300, 120);
        // 开始绘制
        context.stroke();
    </script>
</body>
</html>
程序运行结果
绘制一个红色边框的黑色三角形
  • 设置用于填充绘制的图形的颜色、渐变或模式。
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");

...
context.fillStyle = XXX;
...
  • 填充绘制的图形
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");

...
context.fill();
...

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
    <!-- 创建 canvas 元素-->
    <canvas width="1000" height="1000"></canvas>
    <script type="text/javascript">
        // 获取 canvas 元素
        var canvas = document.querySelector("canvas");
        // 创建 context 对象，相当于打开了画图工具
        var context = canvas.getContext("2d");
       
        // 设置画笔的颜色为红色
        context.strokeStyle = "red";
        // 设置线条的宽度
        context.lineWidth= "5";
        // 设置用于填充绘制的图形的颜色
        context.fillStyle = "black";

        // 将画笔的落点处定在坐标(100, 100)处
        context.moveTo(100, 100);
        // 创建一条从上一个点(100, 100)到坐标(100,300)的线段
        context.lineTo(100, 300);
        // 创建一条从上一个点(100,300)到坐标(300,300)的线段
        context.lineTo(300, 300);
        // 创建从当前点(300,300)回到起始点(100, 100)的路径
        context.closePath()
        // 开始绘制
        context.stroke();
        // 填充绘制图形
        context.fill();
    </script>
</body>
</html>
绘制矩形
  • 创建矩形
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");

...
context.rect(x, y, width, height);
...

1）参数说明：
参数 x：矩形左上角的 x 坐标。
参数 y：矩形左上角的 y 坐标。
参数 width：矩形的宽度，以像素计。
参数 height：矩形的高度，以像素计。
2） 注意事项：
context.rect(x, y, width, height); 只是创建了矩形，并没有绘制出来。因此，创建完成后需使用 context.stroke(); 来绘制。
3）示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
    <!-- 创建 canvas 元素-->
    <canvas width="1000" height="1000"></canvas>
    <script type="text/javascript">
        // 获取 canvas 元素
        var canvas = document.querySelector("canvas");
        // 创建 context 对象，相当于打开了画图工具
        var context = canvas.getContext("2d");
       
        // 创建矩形
        context.rect(50, 50, 200, 100); 
        // 开始绘制
        context.stroke();
    </script>
</body>
</html>
  • 绘制已填充的矩形
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");

...
context.fillRect(x, y, width, height);
...

1）参数说明：
参数 x：矩形左上角的 x 坐标。
参数 y：矩形左上角的 y 坐标。
参数 width：矩形的宽度，以像素计。
参数 height：矩形的高度，以像素计。
2）默认的填充颜色是黑色。可以使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式。
3）示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
    <!-- 创建 canvas 元素-->
    <canvas width="1000" height="1000"></canvas>
    <script type="text/javascript">
        // 获取 canvas 元素
        var canvas = document.querySelector("canvas");
        // 创建 context 对象，相当于打开了画图工具
        var context = canvas.getContext("2d");
       
        //  设置填充的颜色
        context.fillStyle = "yellow";

        // 绘制已填充的矩形
        context.fillRect(50, 50, 200, 100); 
    </script>
</body>
</html>
  • 绘制未填充矩形
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");

...
context.strokeRect(x, y, width, height);
...

1）参数说明：
参数 x：矩形左上角的 x 坐标。
参数 y：矩形左上角的 y 坐标。
参数 width：矩形的宽度，以像素计。
参数 height：矩形的高度，以像素计。
2）笔触的默认颜色是黑色。
3）可以使用 strokeStyle 属性来设置笔触的颜色、渐变或模式。
4）示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
    <!-- 创建 canvas 元素-->
    <canvas width="1000" height="1000"></canvas>
    <script type="text/javascript">
        // 获取 canvas 元素
        var canvas = document.querySelector("canvas");
        // 创建 context 对象，相当于打开了画图工具
        var context = canvas.getContext("2d");
       
       // 设置边框颜色
        context.strokeStyle = "red";

        // 绘制矩形
        context.strokeRect(50, 50, 200, 100); 
    </script>
</body>
</html>
  • 清除矩形
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");

...
context.clearRect(x, y, width, height);
...

1）参数说明：
参数 x：要清除的矩形左上角的 x 坐标。
参数 y：要清除的矩形左上角的 y 坐标。
参数 width：要清除的矩形的宽度，以像素计。
参数 height：要清除的矩形的高度，以像素计。
小技巧：
当 x = 0，y = 0，width = canvas.width，height = canvas.height 时，则可以清除画布上的矩形
2）示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
    <!-- 创建 canvas 元素-->
    <canvas width="1000" height="1000"></canvas>
    <script type="text/javascript">
        // 获取 canvas 元素
        var canvas = document.querySelector("canvas");
        // 创建 context 对象，相当于打开了画图工具
        var context = canvas.getContext("2d");

        // 绘制矩形
        context.strokeRect(50, 50, 200, 100); 

        // 清除矩形
        context.clearRect(0, 0, 1000, 1000);
    </script>
</body>
</html>
绘制圆弧
  • 创建圆弧
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");

...
context.arc(x, y, r, sAngle, eAngle, counterclockwise);
...

1）参数说明：
参数 x：圆中心的 x 坐标。
参数 y：圆中心的 y 坐标。
参数 r：圆的半径。
参数 sAngle：起始角弧度（圆的三点钟位置是0度）。
参数 eAngle：结束角弧度（圆的三点钟位置是0度）。
参数 counterclockwise：规定逆时针还是顺时针绘图。f'alse = 顺时针，true = 逆时针。
2） 角度和弧度的关系：角度/弧度 = 180/pi
3）创建完圆弧后需使用 context.stroke(); 绘制创建的圆弧。
4）示例：绘制一个圆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
    <!-- 创建 canvas 元素-->
    <canvas width="1000" height="1000"></canvas>
    <script type="text/javascript">
        // 获取 canvas 元素
        var canvas = document.querySelector("canvas");
        // 创建 context 对象，相当于打开了画图工具
        var context = canvas.getContext("2d");
       
        // 创建一个圆（2π = 360°）：圆心坐标为 (100, 100)，半径为50
        context.arc(100, 100, 50, 0, 2*Math.PI);
        // 绘制圆
        context.stroke();
    </script>
</body>
</html>

5）示例：绘制圆上任意一点
圆上任意一点坐标：x = ox + r*cos(弧度)，y = oy + r*cos(弧度)
ox：圆心的 x 坐标。
oy：圆心的 y 坐标。
r：圆的半径。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
    <!-- 创建 canvas 元素-->
    <canvas width="1000" height="1000"></canvas>
    <script type="text/javascript">
        // 获取 canvas 元素
        var canvas = document.querySelector("canvas");
        // 创建 context 对象，相当于打开了画图工具
        var context = canvas.getContext("2d");
       
        // 创建一个圆（2π = 360°）：圆心坐标为 (100, 100)，半径为50
        context.arc(100, 100, 50, 0, 2*Math.PI);
        // 绘制圆
        context.stroke();

        // 开启一个新的图层
        context.beginPath();
        
        // 设置点的边框色
        context.strokeStyle = "red";
        // 设置点的填充色
        context.fillStyle = "yellow";
        // 点的坐标
        var n = Math.random(); 
        var x = 100 + Math.cos(Math.PI / n) * 50;
        var y = 100 + Math.sin(Math.PI / n) * 50;
        // 创建点
        context.arc(x, y, 10, 0, 2*Math.PI);
        // 绘制点
        context.stroke();
        
        // 填充点
        context.fill();
    </script>
</body>
</html>
绘制文本
  • 文本属性
    1）设置字体大小
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");

...
context.font = "20px 微软雅黑";
...

2）设置字体水平对齐方式

var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");

...
// start：默认值，文本在指定的位置（绘制文字方法中的坐标）开始。
// end：文本在指定的位置（绘制文字方法中的坐标）结束。
// center：文本的中心被放置在指定的位置（绘制文字方法中的坐标）。
// left：文本在指定的位置（绘制文字方法中的坐标）开始。
// right：文本在指定的位置（绘制文字方法中的坐标）结束。
context.textAlign= "left";
...

2）设置字体垂直对齐方式

var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");

...
// alphabetic：默认值，文本基线是普通的字母基线。
// top：文本基线是 em 方框的顶端。
// hanging：文本基线是悬挂基线。
// middle：文本基线是 em 方框的正中。
// ideographic：文本基线是表意基线。
// bottom：文本基线是 em 方框的底端。
context.textBaseline = "middle"; 
...

textBaseline 属性在不同的浏览器上效果不同，特别是使用 "hanging" 或 "ideographic" 时。


em方框

3）设置文字阴影效果

var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");

...
// 设置文字阴影的颜色
context.shadowColor = XXX; 
// 设置文字阴影的水平偏移量，正数表示向右偏移，负数表示向左偏移
context.shadowOffsetX = XXX; 
// 设置文字阴影的垂直偏移量，正数表示向下偏移，负数表示向上偏移
context.shadowOffsetY = XXX; 
// 设置文字阴影的模糊度
context.shadowBlur = XXX; 
...
  • 绘制填充文本
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");

...
context.fillText(text, x, y);
...

1）参数说明：
参数 text：文本内容
参数 x：开始绘制文本的 x 坐标位置（相对于画布）。
参数 y：开始绘制文本的 y 坐标位置（相对于画布）。
2）默认的填充颜色是黑色。可以使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式。
3）示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
    <!-- 创建 canvas 元素-->
    <canvas width="1000" height="1000"></canvas>
    <script type="text/javascript">
        // 获取 canvas 元素
        var canvas = document.querySelector("canvas");
        // 创建 context 对象，相当于打开了画图工具
        var context = canvas.getContext("2d");
        
        // 设置文字大小
        context.font = "20px 微软雅黑";
        // 设置文字水平对齐方式：在指定的位置（fillText()中的坐标）开始
        context.textAlign= "left";
        // 设置文字垂直对齐方式
        context.textBaseline = "middle"; 
        // 设置文字阴影的颜色
        context.shadowColor = "#EE3030"; 
        // 设置文字阴影的水平偏移量
        context.shadowOffsetX = 20; 
        // 设置文字阴影的垂直偏移量
        context.shadowOffsetY = 20; 
        // 设置文字阴影的模糊度
        context.shadowBlur = 3; 

        // 设置填充颜色
        context.fillStyle = "red";

        // 绘制文本
        context.fillText("关注微信公众：remaizhan", 100, 100);
    </script>
</body>
</html>
  • 绘制镂空文本（未填充）
    注意：字体越小，镂空的效果越不明显，建议字体不要小于15px。
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");

...
context.strokeText(text, x, y);
...

1）参数说明：
参数 text：文本内容
参数 x：开始绘制文本的 x 坐标位置（相对于画布）。
参数 y：开始绘制文本的 y 坐标位置（相对于画布）。
2）默认的笔触颜色是黑色。可以使用 strokeStyle 属性来设置笔触的颜色、渐变或模式。
3）示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
    <!-- 创建 canvas 元素-->
    <canvas width="1000" height="1000"></canvas>
    <script type="text/javascript">
        // 获取 canvas 元素
        var canvas = document.querySelector("canvas");
        // 创建 context 对象，相当于打开了画图工具
        var context = canvas.getContext("2d");
        
        // 设置文字大小
        context.font = "20px 微软雅黑";
        // 设置文字水平对齐方式：在指定的位置（fillText()中的坐标）开始
        context.textAlign= "left";
        // 设置文字垂直对齐方式
        context.textBaseline = "middle"; 
        // 设置文字阴影的颜色
        context.shadowColor = "#EE3030"; 
        // 设置文字阴影的水平偏移量
        context.shadowOffsetX = 20; 
        // 设置文字阴影的垂直偏移量
        context.shadowOffsetY = 20; 
        // 设置文字阴影的模糊度
        context.shadowBlur = 3; 

        // 设置填充颜色
        context.strokeStyle = "red";

        // 绘制文本
        context.strokeText("关注微信公众：remaizhan", 100, 100);
    </script>
</body>
</html>
绘制图片
  • 将图片绘制到画布的指定位置
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");

...
context.drawImage(img, x, y);
...

1）参数说明：
参数 img：规定要使用的图像。
参数 x：在画布上放置图像的 x 坐标位置。
参数 y：在画布上放置图像的 y 坐标位置。
2）当图像的大小超出画布的大小时，超出的部分将不会被显示出来。
3）示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
    <!-- 创建 canvas 元素-->
    <canvas width="1000" height="1000"></canvas>
    <script type="text/javascript">
        // 获取 canvas 元素
        var canvas = document.querySelector("canvas");
        // 创建 context 对象，相当于打开了画图工具
        var context = canvas.getContext("2d");
        
        // 加载图片
        var img = document.createElement("img");
              img.src = "1.jpg";
              img.onload = function() {
                  // 将图片绘制到画布的(0, 0)坐标处
                  context.drawImage(img, 0, 0);
              } 
    </script>
</body>
</html>
  • 将图片绘制到画布的指定位置，且指定绘制后的大小（伸展或缩小图片）
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");

...
context.drawImage(img, x, y, width, height);
...

1）参数说明：
参数 img：规定要使用的图像。
参数 x：在画布上放置图像的 x 坐标位置。
参数 y：在画布上放置图像的 y 坐标位置。
参数 width：要使用的图像的宽度（伸展或缩小图像）。
参数 height：要使用的图像的高度（伸展或缩小图像）。
2）因保持 width/height = img.width/img.height，否则绘制后的图片会失帧。
3）示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
    <!-- 创建 canvas 元素-->
    <canvas width="1000" height="1000"></canvas>
    <script type="text/javascript">
        // 获取 canvas 元素
        var canvas = document.querySelector("canvas");
        // 创建 context 对象，相当于打开了画图工具
        var context = canvas.getContext("2d");
        
        // 加载图片
        var img = document.createElement("img");
              img.src = "1.jpg";
              img.onload = function() {
                  // 将图片绘制到画布的(0, 0)坐标处，且绘制后的图片大小宽为400，高为300
                  context.drawImage(img, 0, 0, 400, 300);
              } 
    </script>
</body>
</html>
  • 将图片上的指定区域绘制到画布上的指定区域（剪切图片）
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");

...
context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);
...

1）参数说明：
参数 img：规定要使用的图像。
参数 sx：从图像的 sx 坐标位置开始剪切。
参数 sy：从图像的 sy 坐标位置开始剪切。
参数 swidth：剪切的宽度。
参数 sheight：剪切的高度。
参数 x：在画布上放置图像的 x 坐标位置。
参数 y：在画布上放置图像的 y 坐标位置。
参数 width：要使用的图像的宽度（伸展或缩小图像）。
参数 height：要使用的图像的高度（伸展或缩小图像）。
2）因保持 width/height = swidth/sheight，否则绘制后的图片会失帧。
3）示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
    <!-- 创建 canvas 元素-->
    <canvas width="1000" height="1000"></canvas>
    <script type="text/javascript">
        // 获取 canvas 元素
        var canvas = document.querySelector("canvas");
        // 创建 context 对象，相当于打开了画图工具
        var context = canvas.getContext("2d");
        
        // 加载图片
        var img = document.createElement("img");
              img.src = "1.jpg";
              img.onload = function() {
                  // 从图片的 (475, 500) 坐标处开始剪切宽为120高为150的图片，然后将其绘制到画布的 (100, 100) 坐标处，绘制后的图片宽为60，高为75
                  context.drawImage(img, 475, 500, 120, 150, 100, 100, 60, 75);
              } 
    </script>
</body>
</html>
渐变
  • 创建从坐标(x0, y0)到坐标(x1, y1)的线性渐变
context.createLinearGradient(x0, y0, x1, y1);
  • 创建从以坐标(x0, y0)为圆心，r0为半径的圆到以坐标(x1, y1)为圆心，r1位半径的圆的径向渐变
context.createRadialGradient(x0, y0, r0, x1, y1, r1);
  • 设置渐变的颜色和位置
var gradient1 = context.createLinearGradient(x0, y0, x1, y1);
gradient1.addColorStop(stop, color);

var gradient2 = context.createRadialGradient(x0, y0, r0, x1, y1, r1);
gradient2.addColorStop(stop, color);

stop：介于 0.0 与 1.0 之间的值，表示渐变中开始(0.0)与结束(1.0)之间的位置。
color：颜色。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
    <!-- 创建 canvas 元素-->
    <canvas width="1000" height="1000"></canvas>
    <script type="text/javascript">
        // 获取 canvas 元素
        var canvas = document.querySelector("canvas");
        // 创建 context 对象，相当于打开了画图工具
        var context = canvas.getContext("2d");
        
        // 创建线性渐变
        var lineGradient = context.createLinearGradient(100, 100, 300, 100);
        // 添加渐变颜色
        lineGradient.addColorStop(0, "blue");
        lineGradient.addColorStop(0.5, "red");
        lineGradient.addColorStop(1, "yellow");
        // 设置用于填充绘制的图形的渐变方案
        context.fillStyle = lineGradient;

        //  绘制用于填充渐变方案的矩形
       context.rect(100, 100, 200, 100);
        
        // 填充图形 
        context.fill();

        // 开启一个新的图层
        context.beginPath();

        // 创建径向渐变
        var radialGradient = context.createRadialGradient(250, 450, 50, 250, 450, 150);
        // 添加渐变颜色
        radialGradient.addColorStop(0, "blue");
        radialGradient.addColorStop(0.5, "red");
        radialGradient.addColorStop(1, "yellow");
        // 设置用于填充绘制的图形的渐变方案
        context.fillStyle = radialGradient;

        //  绘制用于填充渐变方案的矩形
        context.rect(100, 300, 300, 300);
        
        // 填充图形 
        context.fill();
    </script>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,657评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,662评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,143评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,732评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,837评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,036评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,126评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,868评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,315评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,641评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,773评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,470评论 4赞 333
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,126评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,859评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,584评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,676评论 2赞 351

推荐阅读更多精彩内容

  • HTML5 Canvas
    一、添加一个 Canvas 1.布置画布：通过添加<canvas>标签，添加canvas元素 Canvas在HTM...
    Lia代码猪崽阅读 2,202评论 0赞 3
  • 03、HTML5-Canvas(画布)
    一、什么是 Canvas？ HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像 画布是...
    EndEvent阅读 689评论 0赞 1
  • HTML5 Canvas（基础知识）
    最近笔者在学习HTML5的新元素 ，会分享一些基础知识以及小例子，最终使用 实现一个绘制简单图表（条形图、线图或者...
    Sue1024阅读 1,488评论 0赞 1
  • 03、HTML5-Canvas(画布)
    一、什么是 Canvas？ HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像 画布是...
    王梓懿_1fbc阅读 329评论 0赞 0
  • 每天三件事142
    1.五点半起床去万平口参加元旦祈福大典看日出 2.带父母和孩子去公园和商场游玩吃饭 3.完成日常学习计划 小确幸 ...
    37a6b6adef7c阅读 170评论 0赞 0