canvas基础入门 | Serena = 阳光果苏 = 自律给我自由

# 新建画布

1
2
3

<canvas id="ca" width="454" height="350">亲爱的，您的浏览器不支持canvas，请升级浏览器后再来</canvas>
//默认的宽度是300*150
注意事项：宽高不能写%，写了会把它当做固定单位来看待

# 准备画笔（工具）—js

canvas 只有一只 2d 画笔，所有的形状都通过该画笔来实现。

//获取canvas对象
//每写一个canvas标签，就相当于是生成了一个canvas对象
var ca=document.getElementById("ca");
//
//生成一只2D笔,该笔是canvas对象下的一个方法
var pen=ca.getContext('2d');

# 画点什么–学习 pen 的方法和属性了

可以画的东西有：

矩形（正方形 + 长方形）

a. 空心矩形

1	pen.strokeRect(x,y,w,h);

b. 实心矩形

1	pen.fillRect(x,y,w,h);

c. 透明矩形 — 清除矩形–超实用

pen.clearRect(x,y,w,h);
//作用：
1、做异形形状，比如
2、刷新画布，清空画布（）

路径
通过路径可以绘制任何的形状，包括上面的矩形。是一个万能的画形状的方式。

注意事项：路径需要描边或填充才能看到。

在画路径之前，先使用

1	pen.beginPath()

画完后，可以使用

1	pen.closePath()

来结束，如果路径本身就是闭合了的，则该方法什么也不做。

a. 直线、三角形、菱形等

需要使用起点、第二个点、再连线实现（锚点连线）

//起点
pen.moveTo(x,y)
比如：
pen.moveTo(10,10);
//第二个点起（包括终点和中间点）
pen.lineTo(x,y);
//描边
pen.stroke();

b. 圆、圆弧、半圆

//语法：
pen.arc(x, y,半径, 开始弧度,结束弧度, anticlockwise)
//参数说明：
0. x,y是圆心的位置
1.anticlockwise 是否是逆时针：值为true时逆时针，false为顺时针[默认值]
2.角度与弧度的js表达式:
	角度=弧度*180/Math.PI
	弧度=角度*Math.PI/180
	也就是2π弧度=360度
	1弧度？多少度
    1弧度==约57.32度
    1度==？弧度
	1度==0.017444弧度
   
1、画一个正圆
	假设画布是500*500的尺寸，要画一个刚好能填充的圆：
    pen.beginPath();
    pen.arc(250,250,250,0,2*Math.PI);
    pen.fill()
    pen.closePath();
2、画一个半圆
    pen.beginPath();
    pen.arc(250,250,250,0,Math.PI);
    pen.fill()
    pen.closePath();
3、画一段圆弧（不填充）
    pen.beginPath();
    pen.arc(250,250,250,0,Math.PI);
    pen.stroke()
    pen.closePath();

c. 路径矩形

ctx.beginPath()
//路径矩形
ctx.rect(x,y,width,height)
//给矩形描边
ctx.stroke();
//给矩形填充
ctx.fill();
//以上，可以实现一个描边+填充的矩形，可以代替最开始学的空心矩形和实心矩形

# 上色：填充、描边、边框粗细

修改描边的颜色

1 2	//在画东西之前就要先设置颜色 pen.strokeStyle="合法的颜色名"

修改边框粗细

1
2
3

pen.lineWidth="数值"
//比如：
pen.lineWidth=5;

修改、添加填充色
1
pen.fillStyle="合法的颜色名"

描边路径

1 2	//在绘制路径后调用该方法 pen.stroke();

填充路径

1 2	//在绘制路径后调用该方法 pen.fill();

开始绘制路径，调用以下方法
1
pen.beginPath();
结束绘制路径，调用以下方法（不是必须的）
1
pen.closePath();

# 线条样式属性和方法

线端样式
在画形状之前，先使用以下样式设置线端的外观

1
2
3

pen.lineCap="butt|round|square"
			  默认   圆   方块
              默认跟方块之间后者拔高了线条高度

线条相交样式
在画形状之前，先使用以下样式设置线端的外观。

可以用在任意的闭合形状中（不一定是两条线）
1
2
pen.lineJoin="miter|round|bevel"
默认尖角|圆角|斜切角

# 虚线

设置虚线（dashed）、点（dotted）

设置曲线的方法

pen.setLineDash([虚线长度，虚线间隔])
//例子1：设置虚线
pen.setLineDash([10,5])
//例子2：设置点
pen.lineCap="round";
pen.setLineDash([2,15])

设置虚线的偏移
目的：改变虚线的起始点

1 2	pen.lineDashOffset=5;//从最左侧往左偏移5像素开始画虚线-跟样式相反 pen.lineDashOffset=-5;//从最左侧往右的方向偏移5像素

# 绘制文本

设置文本样式（属性）

//设置字体大小等，写法同css的font属性
pen.font="32px  微软雅黑"
//设置颜色（昨天的）
pen.strokeStyle="颜色";//适用于空心文本
pen.fillStyle="颜色";//实心文本

绘制空心文本

1	pen.strokeText("写点啥",x,y,[最大宽度]);

绘制实心文本

1	pen.fillText("写点啥", x, y [, maxWidth])

# 渐变

原理跟 PS 渐变一样。

渐变是一种特殊的颜色。可将其当做普通颜色那样使用。

1. 生成一个渐变（方法）容器-线性
var grd=pen.createLinearGradient(x0,y0,x1,y1);
参数说明：
a.x0,y0表示的是渐变的起始点
b.x1,y1表示的是渐变的终点 
也就是决定渐变如何拉（横着拉、斜着、竖着、45度等）

2. 生成色标（颜色）（方法）--
语法：grd.addColorStop('位置','颜色')
//0表示起点..0.1 0.2 ...1表示开始与结束之间的位置，配置颜色，取值范围为0~1
grd.addColorStop(0,'red')
grd.addColorStop(0.5,'green')
grd.addColorStop(1,'yellow')

3. 将渐变当做颜色赋值给其他可以添加颜色的属性，比如
pen.fillStyle=grd;

# 绘制（读入）一张图片

本身不生成图片，而是导入并加工图片。

# 图片来源

写 img 标签，并且在 canvas 中导入
动态通过 createElement 方法生成一张图片对象，并且导入

# 如何绘制（导入）

1.保留原本图片大小--最简单的写法
pen.drawImage(img对象,x,y)
参数说明：
	x,y表示起点
2.将图片绘制在指定大小范围内--中级
pen.drawImage(img对象,x,y,w,h)
参数说明：
	x,y表示起点
	w,h表示用来显示图片的区域的大小（可能会缩放图片）
3.裁剪原图片，并且绘制在指定范围内--复杂的最全的写法
pen.drawImage(img对象,x0,y0,w0,h0,x1,y1,w1,h1);
参数说明：
	x0,y0,w0,h0表示原始图片从何处切割，切割多大
	x1,y1,w1,h1表示将截取的图粘贴到画布的何处和大小

# canvas 实例

# 笑脸


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业1</title>
    <style>
        #canvas{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin:100px auto;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="625" height="625"></canvas>
    <script>
        var canvas=document.getElementById("canvas");
        var pen=canvas.getContext("2d");
        // 画大脸盘子
        pen.lineWidth=5;
        pen.beginPath();
        pen.arc(315,315,250,0,2*Math.PI);
        pen.closePath();
        pen.stroke();
        // 画笑脸
        pen.beginPath();
        pen.arc(315,315,125,0,Math.PI);
        pen.stroke();
        // 画眼睛
        pen.beginPath();
        pen.arc(250,250,8,0,2*Math.PI);
        pen.closePath();
        pen.stroke();
        pen.beginPath();
        pen.arc(375,250,8,0,2*Math.PI);
        pen.closePath();
        pen.stroke();
    </script>
</body>
</html>

# 机器猫


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业2</title>
    <style>
        #canvas{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="620" height="620"></canvas>
    <script>
        var canvas=document.getElementById("canvas");
        var pen=canvas.getContext("2d");
        // 开始画大脸盘子
        pen.lineWidth=5;
        pen.strokeStyle="#4d4f50";
        pen.fillStyle="#07beea";
        pen.beginPath();
        pen.arc(315,315,188,0,2*Math.PI);
        pen.closePath();
        pen.stroke();
        pen.fill();
        // 开始画腮帮子
        pen.lineWidth=3;
        pen.fillStyle="#fff";
        pen.beginPath();
        pen.arc(315,340,123,0,2*Math.PI);
        pen.closePath();
        pen.stroke();
        pen.fill();
        // 开始画眼睛
        pen.lineWidth=4;
        pen.fillStyle="#fff";
        pen.beginPath();
        pen.strokeRect(245,226,65,35)
        pen.fillRect(245,226,65,35)
        pen.strokeRect(317,226,65,35)
        pen.fillRect(317,226,65,35)
        pen.closePath();
        // 开始画眼珠子
        pen.fillStyle="#000000";
        pen.beginPath();
        pen.arc(278,243,12,0,2*Math.PI);
        pen.arc(350,243,12,0,2*Math.PI);
        pen.closePath();
        pen.fill();
        // 开始画大红鼻子
        pen.lineWidth=2;
        pen.strokeStyle="#000";
        pen.fillStyle="#ff0000";
        pen.beginPath();
        pen.arc(313,295,26,0,2*Math.PI);
        pen.closePath();
        pen.fill();
        pen.stroke();
        // 画小嘴中线
        pen.beginPath();
        pen.moveTo(313,320)
        pen.lineTo(313,420)
        pen.closePath();
        pen.stroke();
        // 画微笑
        pen.beginPath();
        pen.arc(315,330,89,30*Math.PI/180,150*Math.PI/180);
        pen.stroke();
        // 画胡须
        pen.beginPath();
        // 左边
        pen.moveTo(275,328);
        pen.lineTo(193,328);
        pen.moveTo(275,338);
        pen.lineTo(193,358);
        pen.moveTo(275,318);
        pen.lineTo(193,300);
        // 右边
        pen.moveTo(439,328);
        pen.lineTo(357,328);
        pen.moveTo(439,358);
        pen.lineTo(357,338);
        pen.moveTo(439,300);
        pen.lineTo(357,318);
        pen.closePath();
        pen.stroke();
    </script>
</body>
</html>

# 随机颜色色块


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业3</title>
    <style>
        #canvas {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="800" height="800"></canvas>
    <script>
        var canvas = document.getElementById("canvas");
        var pen = canvas.getContext("2d");
        setInterval(function () {
            for (var i = 0; i < 8; i++) {
                for (var j = 0; j < 8; j += 2) {
                    pen.fillStyle = randomColor();
                    i % 2 != 0 ? pen.fillRect(100 * j + 100, 100 * i, 100, 100) : pen.fillRect(100 * j, 100 * i,100, 100);
                }
            }
        }, 500)
        function randomColor() {
            var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f']
            var c = ''
            for (var i = 0; i < 6; i++) {
                c += arr[Math.round(Math.random() * 15)]
            }
            return "#" + c;
        }
    </script>
</body>
</html>

# 七彩虹伞


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业1</title>
    <style>
        #canvas {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="500" height="800"></canvas>
    <script>
        var canvas = document.getElementById("canvas");
        var pen = canvas.getContext("2d");
        // 彩虹七色小伞
        var rainbow = ["#FF0000","#FF7F00","#FFFF00","#00FF00","#00FFFF","#0000FF","#871F78"]
        for (var i = 0; i < 7; i++) {
            pen.fillStyle = pen.strokeStyle = rainbow[i];
            // 伞盖
            pen.beginPath();
            pen.arc(30 + 70 * i, 140, 30, Math.PI, 2 * Math.PI);
            pen.closePath();
            pen.fill();
            // 伞柄
            pen.beginPath();
            pen.moveTo(30 + 70 * i, 140);
            pen.lineTo(30 + 70 * i, 187);
            pen.closePath();
            pen.stroke();
            // 伞把
            pen.beginPath();
            pen.arc(26 + 70 * i, 187, 4, 0, Math.PI);
            pen.stroke();
        }
        // 随机变颜色的七个小伞
        // setInterval(function () {
        //     for (var i = 0; i < 7; i++) {
        //         pen.fillStyle = pen.strokeStyle = randomColor();
        //         // 伞盖
        //         pen.beginPath();
        //         pen.arc(30 + 70 * i, 40, 30, Math.PI, 2 * Math.PI);
        //         pen.closePath();
        //         pen.fill();
        //         // 伞柄
        //         pen.beginPath();
        //         pen.moveTo(30 + 70 * i, 40);
        //         pen.lineTo(30 + 70 * i, 87);
        //         pen.closePath();
        //         pen.stroke();
        //         // 伞把
        //         pen.beginPath();
        //         pen.arc(26 + 70 * i, 87, 4, 0, Math.PI);
        //         pen.stroke();
        //     }
        // }, 1000)

        // 生成随机颜色的方法
        function randomColor() {
            var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f']
            var c = ''
            for (var i = 0; i < 6; i++) {
                c += arr[Math.round(Math.random() * 15)]
            }
            return "#" + c;
        }
    </script>
</body>

</html>

# 忍者水果


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业4</title>
    <style>
        #canvas {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="640" height="480"></canvas>
    <script>
        /** @type {HTMLCanvasElement} */
        var canvas = document.getElementById("canvas");
        var pen = canvas.getContext("2d");
        var img1 = document.createElement("img");
        img1.src = "images/background.jpg";
        var img2 = document.createElement("img");
        img2.src = "images/home-mask.png";
        var img3 = document.createElement("img");
        img3.src = "images/logo.png";
        var img4 = document.createElement("img");
        img4.src = "images/ninja.png";
        var img5 = document.createElement("img");
        img5.src = "images/home-desc.png";
        var img6 = document.createElement("img");
        img6.src = "images/dojo.png";
        var img7 = document.createElement("img");
        img7.src = "images/fruit/peach.png";
        var img8 = document.createElement("img");
        img8.src = "images/new.png";
        var img9 = document.createElement("img");
        img9.src = "images/new-game.png";
        var img10 = document.createElement("img");
        img10.src = "images/fruit/sandia.png";
        var img11 = document.createElement("img");
        img11.src = "images/quit.png";
        var img12 = document.createElement("img");
        img12.src = "images/boom.png";
        window.onload = function () {
            pen.drawImage(img1, 0, 0);
            pen.drawImage(img2, 0, 0);
            pen.drawImage(img3, 20, 0);
            pen.drawImage(img4, 316, 45);
            pen.drawImage(img5, 8, 125);
            // 旋转桃子
            pen.translate(20, 278);
            pen.rotate(-Math.PI / 8);
            pen.drawImage(img6, 0, 0);
            pen.rotate(Math.PI / 8);
            pen.translate(-20, -278);
            pen.translate(165, 352);
            pen.rotate(-Math.PI);
            pen.drawImage(img7, 0, 0);
            pen.rotate(Math.PI);
            pen.translate(-165, -352);
            pen.drawImage(img8, 162, 211);
            // 画西瓜
            pen.translate(220, 274);
            pen.rotate(-Math.PI / 8);
            pen.drawImage(img9, 0, 0);
            pen.rotate(Math.PI / 8);
            pen.translate(-220, -274);
            pen.translate(320, 386);
            pen.rotate(1.4*Math.PI );
            pen.drawImage(img10, 0, 0);
            pen.rotate(-1.4*Math.PI );
            pen.translate(-320, -386);
            // 画炸弹
            pen.translate(579, 480);
            pen.rotate(1.2*Math.PI);
            pen.drawImage(img11,0, 0);
            pen.rotate(-1.2*Math.PI);
            pen.translate(-579, -480);
            pen.translate(509, 330);
            pen.rotate(-Math.PI/112);
            pen.drawImage(img12,0, 0,88,88);
            pen.rotate(Math.PI/112);
            pen.translate(-509, -330);
        }
    </script>
</body>

</html>

canvas