首先，我们用最常用的方法画一个矩形。
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
绘制矩形
你的浏览器不支持画布让我们换一个！
在window.onload =函数（）{
VaR的画布document.getelementbyid（画布）；
canvas.width = 800；
canvas.height = 600；
VaR上下文= canvas.getcontext（2D）；
Context.beginPath（）；
Context.moveTo（150,50）；
Context.lineTo（650,50）；
Context.lineTo（650550）；
Context.lineTo（150550）；
Context.lineTo（150,50 / /画）；最后的形象，是封闭的
context.linewidth = 5；
context.strokestyle =黑；
context.stroke（）；
}
运行结果：
乍一看，没有问题，但视力好的童鞋已经发现，和最后的关闭是一个问题，导致在左上角有一个缺口。这种情况是通过设置线宽造成的。如果默认的1招，是没有问题的。但更大的笔画，宽该线的差距更为明显。那么如何才能避免
标题已经剧透，对clothpath使用（图形）封闭。
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
绘制矩形
你的浏览器不支持画布让我们换一个！
在window.onload =函数（）{
VaR的画布document.getelementbyid（画布）；
canvas.width = 800；
canvas.height = 600；
VaR上下文= canvas.getcontext（2D）；
Context.beginPath（）；
Context.moveTo（150,50）；
Context.lineTo（650,50）；
Context.lineTo（650550）；
Context.lineTo（150550）；
Context.lineTo（150,50）； / /最后可以不画
（上下文。closepath）（closepath）； / /使用一个封闭图形
context.linewidth = 5；
context.strokestyle =黑；
context.stroke（）；
}
运行结果：
In this example, we know that when we draw the path, we need to wrap the planned path with beginPath () and closePath ().Of course, the last pen can not be drawn, directly using closePath (), which will automatically help you close.(so if you don't want to draw a closed graph, you can't use closePath ())
矩形的颜色
在这里，我们要介绍的是脑卒中的重要方法（）（），填写（）。如有行程，我们必须首先填写FillStyle属性选择填充颜色前。
例如，我们将把上面的矩形涂成黄色，这样我们就可以写它了。
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
绘制矩形
你的浏览器不支持画布让我们换一个！
在window.onload =函数（）{
VaR的画布document.getelementbyid（画布）；
canvas.width = 800；
canvas.height = 600；
VaR上下文= canvas.getcontext（2D）；
Context.beginPath（）；
Context.moveTo（150,50）；
Context.lineTo（650,50）；
Context.lineTo（650550）；
Context.lineTo（150550）；
Context.lineTo（150,50）； / /最后可以不画
（上下文。closepath）（closepath）； / /使用一个封闭图形
context.fillstyle =黄色； / /选择油漆桶的颜色
context.linewidth = 5；
context.strokestyle =黑；
（上下文填充）；确定填充
context.stroke（）；
}
运行结果：
需要指出，这里是一个很好的代码规范，因为帆布是以前所说的是基于状态的渲染，只有行程（）和填充（）被称为确定渲染。所以我们需要把这两行代码最后的状态和设置代码的其余部分是摆在他们面前的，和国家的设置是从确定绘图代码分离，提高了代码的可读性。
封装的绘制方法
您一定已经发现绘制矩形是四个这样的笔画。每次我们用这个愚蠢的方法来画矩形，我们都需要画四个麻烦。如果我们想花10个长方形1001000这样写，代码会臃肿，重用性很低。在这里，我们可以用Javaｓｃｒｉｐｔ来封装这些方法。我们知道一个矩形可以唯一地由它的左上角坐标和它的长度决定。
Javaｓｃｒｉｐｔ函数
这里我们将介绍Javaｓｃｒｉｐｔ函数。如果基本学生可以跳过这个大的部分，直接看后面。
Javaｓｃｒｉｐｔ和Actionｓｃｒｉｐｔ语言的函数声明是在编程语言中最简单的。
函数功能
函数的功能，可以编写一个代码，然后多次重复使用代码。
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
VaR和；
总和= 3 + 2；
警报（和）；
总和= 7 + 8；
警报（和）；
的…重复两行代码
如果你想达到8组数字的和，你需要16行代码，你执行得越多，代码行就越多，所以我们可以把一个特定功能的代码块放到函数中，然后直接调用这个函数，这样你就可以避免重复大量代码的麻烦。
使用函数完成：
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
功能（A，B）{ 2
总和= A + B；
警报（和）；
}只写一次
2（3,2）；
2（7,8）；
…调用函数可以
定义函数
我如何定义一个函数请看下面的格式：
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
函数函数名（）
{
函数体；
}
函数定义函数的关键字，函数名，函数名，函数体，替换完成特定功能的代码。
函数调用
定义一个函数后，它不会自动执行。它需要调用，函数名直接写入所需的位置：
第一个案例在标签内被调用。
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
TCON（）函数
{
警告（）祝贺函数调用的学习！）
}
（TCON）； / /呼叫功能，直接写函数名。
第二种情况是在HTML文件中调用的，比如单击按钮定义的函数。
这种情况后来被使用了。
带参数的函数
格式如下：
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
函数函数名（参数1，参数2）
{
功能代码
}
注意：参数可以是多个，可以根据需要添加或减少参数个数，参数用逗号（逗号）隔开。
根据这种格式，函数的任意两个数之和应写成：
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
2（x，y）的函数
{
总和= y；
document.write（总和）；
}
x和y是函数参数，函数调用时，我们就可以把这两个加数传递给函数的实际参数通过两。
例如，2（3, 4）会发现3 + 4的总和，和ADD2（60,20）会发现60和20的总和。
返回值的函数
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
2（x，y）的函数
{
总和= y；
返回和；返回函数的值，返回值的值称为返回值。
}
这里的返回与其他语言相同，但在像js这样的弱类型语言中，返回值类型不需要写入函数声明。
在这一点上，我们还将Javaｓｃｒｉｐｔ函数系统化。
我们还可以封装矩形。代码如下：
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
封装绘图矩形法
你的浏览器不支持画布让我们换一个！
在window.onload =函数（）{
VaR的画布document.getelementbyid（画布）；
canvas.width = 800；
canvas.height = 600；
VaR上下文= canvas.getcontext（2D）；
150, 50, 50、50（上下文，drawRect，红
250, 50, 50、50（上下文，drawRect，绿色
350, 50, 50、50的背景下，drawRect（，黄
}
函数drawRect（CXT，X，Y，宽度、高度、设置、带、BorderColor）{
Cxt.beginPath（）；
Cxt.moveTo（x，y）；
Cxt.lineTo（x +宽度，Y）；
Cxt.lineTo（X + Y +宽度，高度）；
Cxt.lineTo（X，Y +高）；
Cxt.lineTo（x，y）；
Cxt.closePath（）；
cxt.linewidth =带；
cxt.strokestyle =边框颜色；
cxt.fillstyle =设置；
Cxt.fill（）；
Cxt.stroke（）；
}
运行结果：
使用矩形绘制矩形（）方法
犹豫绘制矩形是一种常见的方法，所以在画布API我们已经帮我们封装绘制矩形，方法mdash；mdash；Rect（），该方法接收4个参数，x，y，宽度，高度，和实际的电话是一样的
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
context.rect（x，y，宽度，高度）；
在此基础上，我们有助于优化刚刚封装的方法。
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
函数drawRect（CXT，X，Y，宽度、高度、设置、带、BorderColor）{
Cxt.beginPath（）；
cxt.rect（x，y，宽度，高度）；
/ / cxt.closepath（）；不能使用closepath（）
cxt.linewidth =带；
cxt.strokestyle =边框颜色；
cxt.fillstyle =设置；
Cxt.fill（）；
Cxt.stroke（）；
}
调用封装方法绘制魔法图像。
神奇的形象~
嗯，我们是在练习的时候，给我们一个好的运动包。
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
画出神奇的数字
你的浏览器不支持画布让我们换一个！
在window.onload =函数（）{
VaR的画布document.getelementbyid（画布）；
canvas.width = 800；
canvas.height = 600；
VaR上下文= canvas.getcontext（2D）；
Context.beginPath（）；
context.rect（0, 0, 800，600）；
context.fillstyle =# aa9033 ；
Context.fill（）；
Context.beginPath（）；
对于（var i = 0；i < 20；i + +）{
drawwhiterect（上下文，200 + 10 * 100 + 10 *我，我，我400-20 400-20 *，*我）；
drawblackrect（上下文，205 + 10 * 105 + 10 *我，我，我390-20 390-20 *，*我）；
}
Context.beginPath（）；
context.rect（395, 295, 5，5）；
context.fillstyle =黑；
context.linewidth = 5；
Context.fill（）；
context.stroke（）；
}
功能drawblackrect（CXT，X，Y，宽度，高度）{
Cxt.beginPath（）；
cxt.rect（x，y，宽度，高度）；
cxt.linewidth = 5；
cxt.strokestyle =黑；
Cxt.stroke（）；
}
功能drawwhiterect（CXT，X，Y，宽度，高度）{
Cxt.beginPath（）；
cxt.rect（x，y，宽度，高度）；
cxt.linewidth = 5；
cxt.strokestyle =白色；
Cxt.stroke（）；
}
运行结果：
它是恶魔吗不是很酷吗这段代码不需要一点空间来解释，在课堂上想一想，并试着利用所学的知识画出一个很酷的形象。实际上，它只介绍了四个属性和方法：——--（），，，closepath填充颜色，填充矩形（），（），和一个扩展的Javaｓｃｒｉｐｔ函数。
图像圆角效果的画布实现
本规则适用于各种画布绘制的规则或不规则形状。
画布实现画面的角落的关键是使用纹理填充；
在画布上，有一种方法叫createpattern，可使已知的大小转换成纹理填充的图像元素。
举个栗子，如果图片效果轮命名test.webp，大小100px * 100px，主要的JS代码如下：
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
画布元素，图形元素
VaR的画布document.queryselector（#画布），图像=新的图像（）；
VaR上下文= canvas.getcontext（2D）；
image.onload =函数（）{
创建图像纹理
VAR模式= context.createpattern（形象，不重复）；
绘制一个圆
Context.arc (50, 50, 50, 0, 2 * Math.PI);
画一个圆圈填充
context.fillstyle =模式；
Context.fill（）；
}；
image.src =测试。JPG；
它可以使画布上下文等于纹理对象的填充颜色属性值。
画布的矩形渲染API没有圆角属性，所以演示中的圆角矩形使用了一个定制的方法。
