圆角矩形是由四行和四个1 4弧，这是拆卸如下。


因为我们要编写一个函数，而不是一个固定的圆角矩形，这里是函数所需参数的列表。

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。






圆角矩形

体{背景：URL（， /图像/ BG3 .jpg）重复；}
#帆布{ border: 1px solid # aaaaaa；显示：块；保证金：50px汽车；}





你的浏览器不支持画布让我们换一个！




在window.onload =函数（）{
VaR的画布document.getelementbyid（画布）；
canvas.width = 800；
canvas.height = 600；
VaR上下文= canvas.getcontext（2D）；
context.fillstyle =# FFF；
（00800600）context.fillrect；

drawroundrect（背景，200, 100, 400，400, 50）；
context.strokestyle =# 0078aa ；
context.stroke（）；
}

功能drawroundrect（CXT，X，Y，宽度、高度、半径）{
Cxt.beginPath（）；
Cxt.arc（X + Y +半径，半径，半径，Math.PI、math.pi * 3 / 2）；
Cxt.lineTo（宽半径+ x，y）；
Cxt.arc（宽x + y半径，半径，半径，math.pi * 3 / 2，math.pi×2）；
Cxt.lineTo (width + X, height + Y - radius);
Cxt.arc（宽x高半径，半径+ Y，半径0，math.pi * 1 / 2）；
Cxt.lineTo（半径+ X + Y，高度）；
Cxt.arc（半径+ x，高度半径+ Y，半径，math.pi * 1 / 2，数学，PI）；
Cxt.closePath（）；
}







运行结果：


建议你自己画一个圆角矩形，这样有助于掌握路径。

这里我们使用这个函数做其他事情。

绘制2048游戏界面
不要对代码做太多的解释，你做研究，建议你先去做，因为我在这里使用硬编码，所以它不是很好，你可以试着优化它。

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。






2048游戏界面

体{背景：URL（， /图像/ BG3 .jpg）重复；}
#帆布{ border: 1px solid # aaaaaa；显示：块；保证金：50px汽车；}





你的浏览器不支持画布让我们换一个！




在window.onload =函数（）{
VaR的画布document.getelementbyid（画布）；
canvas.width = 800；
canvas.height = 600；
VaR上下文= canvas.getcontext（2D）；
context.fillstyle =# FFF；
（00800600）context.fillrect；

drawroundrect（背景，200, 100, 400，400, 5）；
context.fillstyle =# aa7b41 ；
context.strokestyle =# 0078aa ；
context.stroke（）；
Context.fill（）；

对于（var i = 1；i < 4；i + +）{
对于（var j＝1；j＜4；j + +）{
drawroundrect（上下文，200 + 16 + 80 * *我（我1），100 + 16 * j + 80 *（J 1），80, 80, 5）；
context.fillstyle =# ccbfb4 ；
context.strokestyle =# 0078aa ；
context.stroke（）；
Context.fill（）；
}
}
}

功能drawroundrect（CXT，X，Y，宽度、高度、半径）{
Cxt.beginPath（）；
Cxt.arc（X + Y +半径，半径，半径，Math.PI、math.pi * 3 / 2）；
Cxt.lineTo（宽半径+ x，y）；
Cxt.arc（宽x + y半径，半径，半径，math.pi * 3 / 2，math.pi×2）；
Cxt.lineTo（宽+ x，高度+ y半径）；
Cxt.arc（宽x高半径，半径+ Y，半径0，math.pi * 1 / 2）；
Cxt.lineTo（半径+ X + Y，高度）；
Cxt.arc（半径+ x，高度半径+ Y，半径，math.pi * 1 / 2，数学，PI）；
Cxt.closePath（）；
}








运行结果：


在圆角矩形的函数被写入后，它可以被封装到js文件本身中。之后，可以把哪些功能放进去，使这个文件是一组自己的图形库和游戏引擎。天气凉爽吗

事实上，游戏制作是画布的主要用途，但重要的是要知道每一个游戏设计师都是艺术家。


画一个微信对话框
你可以尝试用帆布画实践和整合微信聊天界面。


它使用了一些绘制矩形、绘制矩形、绘制多行和填充颜色的知识。还有一些我们不说的画布文本API，所以只要你能画一个通用的界面，你就具备了资格。

事实上，对话的研究产生；mdash；微信接口生成器网页它可以被描述为一个微商，是不是很酷


这个夏天的原始版本只花了两天时间写的，尚未达到释放点，当我写一段，这个网页进行了优化。你可以试着自己做，你也可以关注和参考我的小项目的GitHub：微信界面生成器的界面。代码不再重复本节。

嗯，据悉，基本上所有的基本画布画已经完成在这个API，你拿起自己的画笔，并充分发挥他们。