应用HTML5 Canvas绘图圆角矩形框及有关的1些运用举_小程序制作流程_小程序源码_免费小程序模板_摇号小程序

圆角矩形框是由4段线条和4个1/4圆弧构成，拆解以下。

由于大家要写的是涵数而并不是1个固定不动的圆角矩形框，因此这里列出的是涵数必须的主要参数。剖析好以后，立即敲出编码。

JavaScript Code拷贝內容到剪贴板

运作結果：

提议大伙儿自身动手能力绘图1个圆角矩形框，这样有助于对相对路径的把握。

下面大家用这个涵数来做点别的的事儿。

绘图2048手机游戏页面
对编码不做过量解读，大伙儿自身科学研究科学研究，提议自身动手能力先尝试写1下。由于我这里选用的是硬编号，因此并不是很好，大伙儿也可尝试提升1下。

JavaScript Code拷贝內容到剪贴板

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF⑻">
<title>2048手机游戏页面</title>
<style>
body { background: url("./images/bg3.jpg") repeat; }
#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
</style>
</head>
<body>
<div id="canvas-warp">
<canvas id="canvas">
你的访问器竟然不适用Canvas？！赶紧换1个吧！！
</canvas>
</div>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
context.fillStyle = "#FFF";
context.fillRect(0,0,800,600);
drawRoundRect(context, 200, 100, 400, 400, 5);
context.fillStyle = "#AA7B41";
context.strokeStyle = "#0078AA";
context.stroke();
context.fill();
for(var i = 1; i <= 4; i++){
for(var j = 1; j <= 4; j++){
drawRoundRect(context, 200 + 16 * i + 80 * (i - 1), 100 + 16 * j + 80 * (j - 1), 80, 80, 5);
context.fillStyle = "#CCBFB4";
context.strokeStyle = "#0078AA";
context.stroke();
context.fill();
}
}
}
function drawRoundRect(cxt, x, y, width, height, radius){
cxt.beginPath();
cxt.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);
cxt.lineTo(width - radius + x, y);
cxt.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);
cxt.lineTo(width + x, height + y - radius);
cxt.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);
cxt.lineTo(radius + x, height +y);
cxt.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);
cxt.closePath();
}
</script>
</body>
</html>

运作結果：

这个圆角矩形框的涵数写好以后，能够自身封裝进JS文档里，之后遇到甚么好的涵数都可以以放进去，这样累积下来，这个文档便是1套属于自身的图型库和手机游戏模块了，是否十分的酷？

实际上手机游戏制做是Canvas的关键主要用途，可是要了解每个手机游戏设计方案师全是1个造型艺术家。

绘图手机微信会话框
大伙儿能够尝试着应用Canvas绘图1下手机微信闲聊页面，做为训练与推进。

这里应用到了绘图矩形框，绘图圆角矩形框，绘图多线条图型，填充色调的1些专业知识。也有1些 Canvas文字API 大家并沒有说到，因此大伙儿要是能绘图出1个大约的页面即使达标了。可以绘图出来，也就基础把握了Canvas API。

实际上上述会话是转化成出来的——“手机微信页面转化成器网页页面版”，可以说是微商神器。是否十分的酷？

这只是暑期花两天和间写的最开始版本号，还并未做到公布的程度，在我写本节的情况下，这个网页页面的页面还正在提升中。大伙儿能够尝试自身动手能力做做，还可以关心和参照我的这个小新项目github：手机微信页面转化成器。本节就已不反复得出页面编码了。

好了，学到这里基础上早已学完了全部基础的Canvas制图的api，大伙儿拿起自身的画笔，随意的充分发挥吧！

技术知识