整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
简单形状绘制《HTML5系列教程18》
Canvas在HTML5中有着非常强大的功能，它不仅可以绘制一些简单的图案，还可以进行一些简单形状绘制如：圆形、三角形、矩形、圆角矩形等二维形状，并可以根据用户的实际需要绘制自定义二维图形。而要完成这项功能，就需要用到CanvasRenderingContext2D对象提供的另外一些API。
1.圆形的绘制方法
在上篇文中我们使用了arc函数绘制圆弧，不知道大家有没有注意到我们在指定圆弧结束角时使用了“2*math.PI*0.75”这样的参数，Math.PI是计算中表示数学π的意思，我们用2π乘以0.75就是绘制了四分之三个圆，这样就得到了一个圆弧。如果我们把0.75去掉，就能绘制一个圆形了，代码如图所示：
HTML5中圆形的绘制方法代码
在谷歌浏览器中显示预览效果如图所示：
HTML5中圆形的绘制方法效果预览
2.三角形的绘制方法
在上一篇文章我们也学了如何绘制一条直线，那么如果我们绘制三条直线，并设置三条直线的起点和终点互相连接，这样我们就能得到一个三角形了，绘制三角形的代码如图所示：
HTML中三角形的绘制方法代码
在谷歌浏览器中显示预览效果如图所示：
HTML中三角形的绘制方法效果预览
3.圆角矩形的绘制方法
上面的图形我们都是用Canvas的CanvasRenderingContext2D能够直接提供的图形对象，那如果需要绘制如圆角矩形这样特殊一点的图形，我们应该怎样绘制呢？那么这里就需要用到另外几个API对象了，通过一些特殊的处理，绘制出符合我们要求的图形。在下面的代码中，我们使用了arcTo函数绘制圆角矩形，该函数的描述见下表：
HTML5中arcTo函数详情描述
arcTo函数为我们提供了两条切线之间圆弧的绘制方法，圆角矩形是由四个这样的圆弧和四条直线组成的，所以只要我们能精确控制圆弧和直线的每个点，就能准确绘制出一个圆角矩形。绘制圆角矩形的代码如图所示：
在HTML5中圆角矩形的绘制方法代码
在谷歌浏览器中显示预览效果如图所示：
在HTML5中圆角矩形的绘制方法效果预览
4.简单的自定义图形绘制“微笑表情绘制”
虽然Canvas提供了很多基本图形的绘制，但在实际应用中，经常会需要绘制一些复杂的图形，而Canvas却并没有提供绘制这些图案的API，所以这时候就需要使用多种绘图方法来绘制这些图形。以下是作为示例所绘制的一个简单的自定义图形“微笑表情”
在HTML中微笑表情绘制方法代码
在谷歌浏览器中显示预览效果如图所示：
在HTML中微笑表情绘制方法效果预览
日常生活中可以见到很多不规则的图形，你可以想到些什么图形呢？大家可以尝试一下利用已经学了的知识把自己想到的一些简单形状绘制出来。祝大家：身体健康、生活愉快！
几日，随着小白对HTML5认识的提升，他自己没事浏览网页的时候总会注意一些特殊的展示效果，让他印象最深刻的一个效果就是用户头像了，一个矩形的图片怎么就显示成圆形了呢？一上午没想明白，下午看着老朱没什么事，就去向老朱请教：“朱哥！网页上的图片怎么能显示成圆角呢？特别是正圆形是怎么做出来的啊？”
老朱随口说道：“border-radius啊！之前我们已经用过几次了啊！”
小白说：“这不是控制容器圆角的么？图片也可以控制么？”
老朱说：“讲图片的时候我不是告诉过你了么？肯定是没好好听，图片标签img也是一个容器，它是一个放图片的容器，在img里面显示什么图片是靠src属性来决定的。既然是容器你不是就可以用border-radius来控制了么？你试试！”
小白高兴的说道：“真的成圆角了啊！我要把他变成正圆，是不是圆角设置成它宽度的一半就可以了？”
老朱说：“你先试试吧！试玩就知道了！”
“不行啊！这是怎么回事？”
老朱跟小白说：“css的圆角属性值最多是边的一半！你的图片宽比高大，所以圆角值最多位高的一半！你可以先尝试把图片的宽高设置成一样的看看！”
“果然变成正圆了，可是这样的话图片就有变形了，如果小头像的话还好说，大头像可就不好看了！”
老朱说道：“所以现在很多网站头像上传的时候都会让用户截取一个正方形的图片生成头像，就是为了方便进行圆角控制！”
小白说：“有没有折中的方法？假如网站没有用户设置正方形头像的功能，还不想让图片变形呢？”
老朱说：“正圆显示的肯定是一个高和宽一样的区域，所以图片被截取肯定是不可避免的了。你可以给图片外部套一个div容器，让这个div容器的宽度高度一致，并且设置超出隐藏。这样设置一下div的圆角就可以了！你试试看”
小白做好以后说道：“我又发现一个问题，div设置宽和高一样以后，图片如果高比宽小，图片高度得跟父容器高度一致才能出来效果！而图片高比宽大，则需要设置图片宽度和父容器宽度一致。我觉得要把它完善必须使用js来判断图片宽和高的比例进行动态设置。”
“嗯，你可以试试！”
聪明的大家，你们有没有什么更好的图片圆角方式呢？
想学H5的朋友可以关注老炉，您的关注是我持续更新《小白HTML5成长之路》的动力！
人可能会疑惑，我为什么专门用一节内容来说边框和圆角。其实，不为别的，只为它们在开发中，在Web系统中，在手机页面中，太常用了。有边框的页面，让人耳目一新，一目了然；有圆角的内容，让人赏心悦目，心旷神怡。说的有点夸张了，就这么着吧。
边框(border)一般为长方形形状，有上下左右四条边，CSS边框属性允许你指定一个元素边框的样式和颜色。CSS的圆角(border-radius)方法，可给任何元素制作 "圆角"效果。
在CSS中，你可以通过border和其延伸的，如border-style，来实现边框的效果。上边框相关的有border-top-style样式、border-top-color颜色、border-top-width宽度和组合了它们的border-top。下、左右边框类似，换成对应的单词即可。
边框样式(border-style)常用的有dotted(点线)、dashed(虚线)、solid(实线)、double(双边框)这四种，不常用的有groove(3D沟槽)、ridge(3D脊边)、inset(3D嵌入)和outset(3D突出)。
/* --------在样式表文件中---------- */
/*4条边框一起设置*/
.four-border {
width: 800px;
border: 2px solid darkgreen;;
}
/*四条边框可个性化*/
.four-style {
width: 800px;
/* 上、右、下、左*/
border-width: 1px 2px 3px 4px;
/*上、右左、下*/
border-style: solid dashed double;
/*上下和右左*/
border-color: darkgreen coral;
}
/*单条边框设置*/
.one-style {
width: 800px;
border-top: 1px groove orangered;
border-bottom-width: 5px;
border-bottom-style: inset;
border-bottom-color: darkgreen;
}HTML文件内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边框逼格</title>
<link rel="stylesheet" type="text/css" href="ys2.css"/>
</head>
<body>
<br/><br/>
<div class="four-border">
border统一设置四条边框<br/>
顺序为：border-width、border-style和border-color.
</div>
<br/><br/>
<div class="four-style">
四条边框一起设置，风格可不同<br/>
顺序为:上、右、下、左。<br/>
1. 只有一个值(如：border-width:2px)：表示4条边框全部一样；<br/>
2. 有两个值(如：border-width:2px 3px)：表示上下和右左;<br/>
3. 有三个值(如：border-width:2px 3px 1px)：表示上、右左、下;<br/>
4. 有四个值(如：border-width:2px 3px 1px 5px):表示上、右、下、左。
</div>
<br/><br/>
<div class="one-style">
单独一天边框进行设置<br/>
border-top：顶部宽度、样式、颜色，一起设置<br/>
border-top-width:上边框宽度；<br/>
border-top-style:上边框样式；<br/>
border-top-color:上边框颜色。
<br/>
</div>
</body>
</html>输出结果
使用CSS的border-radius 属性，你可以给任何元素制作 "圆角"。 border-radius统一指定4个圆角，顺序为左上、右上、右下和左下。如果要特定指定某个角的话，用border-top-left-radius等方式即可。
在样式表ys2.css文中的内容
/*4个角统一指定*/
.four-radius {
width: 800px;
line-height: 40px;
background: #8AC007;
border-radius: 15px;
vertical-align: middle;
text-align: center;
}
/*单独指定一个角*/
.one-radius {
width: 800px;
line-height: 40px;
background: #8AC007;
border-top-left-radius: 15px;
border-bottom-right-radius: 50px;
vertical-align: middle;
text-align: center;
}在HTML文件中的内容
<br/><br/>
<div class="four-radius">
统一设置4个圆角<br/>
一个值： 四个圆角值相同;<br/>
两个值: 左上角与右下角，右上角与左下角;<br/>
三个值: 左上角, 右上角和左下角，右下角;<br/>
四个值: 左上角，右上角，右下角，左下角。
</div>
<br/>
<div class="one-radius">
单独指定某个角<br/>
border-top-left-radius：左上角;<br/>
border-top-right-radius：右上角;<br/>
border-bottom-right-radius：右下角;<br/>
border-bottom-left-radius：左下角。
</div>输出结果
不要重复造轮子，所以好多程序员一遇到问题，就喜欢搜索，我也是，哈哈哈~。CSS有指定边框的属性，也有圆角的属性，将其放在一起，是不是就可以实现圆角边框?答案毋庸置疑，答案是肯定的。
在样式表ys2.css文件中的内容
/*圆角边框*/
.corners {
border-radius: 50px;
border: 3px solid #8AC007;
padding: 50px;
width: 720px;
line-height: 50px;
vertical-align: middle;
text-align: center;
}在HTML文件中的内容
<div class="corners">
边框属性和圆角属性，组合成圆角边框
</div>输出结果
好了，有关CSS的圆角边框内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。
一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注：老陈说编程。分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。
#前端##HTML5##CSS##程序员##Web#
*请认真填写需求信息，我们会在24小时内与您取得联系。
