定义和用法

lineCap 属性设置或返回线条末端线帽的样式。

注释:"round" 和 "square" 会使线条略微变长。

默认值: butt
JavaScript 语法: context.lineCap="butt|round|square";

属性值

描述
butt 默认。向线条的每个末端添加平直的边缘。
round 向线条的每个末端添加圆形线帽。
square 向线条的每个末端添加正方形线帽。

例子

        var c = document.getElementById('myCanvas');
var ctx = c.getContext("2d");//获取上下文2d环境
var lineCap = ["butt","round","square"];
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(10,150);
ctx.moveTo(150,10);
ctx.lineTo(150,150);
ctx.stroke();
ctx.closePath(); for (var i = 0; i < lineCap.length; i++) {
ctx.strokeStyle = "blue";
ctx.lineWidth = 20;
ctx.lineCap = lineCap[i];
ctx.beginPath();
ctx.moveTo(10,30*i+20);
ctx.lineTo(150,30*i+20);
ctx.stroke();
ctx.closePath();//此处两行不能颠倒位置,如果先闭合路径再绘制就不会有端点样式
};

效果图

HTML5中lineCap端点样式遇到closePath()的更多相关文章

  1. html5 中的 css样式单 的 两种调用方式的区别

    在 html5 中 使用 css 样式单的方式 有4种: 1.链接外部样式文件:将样式文件 彻底与 html 文档分离,样式文件需要额外引入,这种情况下 一批样式 可以控制多份文档.对于好多文件都共有 ...

  2. HTML5 canvas 中的线条样式

    线条样式属性 lineCap        设置或返回线条的结束端点样式 butt         默认.向线条的每个末端添加平直的边缘. round         向线条的每个末端添加圆形线帽. ...

  3. HTML5中input[type='date']自定义样式

    HTML5提供了日历控件功能,缩减了开发时间,但有时它的样式确实不如人意,我们可以根据下面的代码自行修改. 建议:复制下面的代码段,单独建立一个css文件,方便我们修改. /* 修改日历控件类型 */ ...

  4. 【转】html5中如何去掉input type date默认样式

    html5中如何去掉input type date默认样式1.时间选择的种类:HTML代码: 选择日期:<input type="date" value="2017 ...

  5. html5中如何去掉input type date默认样式

    html5中如何去掉input type date默认样式 1.时间选择的种类: HTML代码: 选择日期:<input type="date" value="20 ...

  6. HTML5中的 Canvas

    什么是Canvas? Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像.Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度.JavaScript代码可以访问该地区,通过 ...

  7. HTML5 中的 canvas 画布(一)

    ---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...

  8. HTML5中id可以用数字开头,但在css中不能正常使用

    昨晚在看<响应式Web设计:html5和css3实战>时,书中提到“HTML5中的ID指可以用数字开头”.这个还真不知道,于是测试了一下,发现了问题. 在H5描述中是这样说的: 在css样 ...

  9. HTML5基本标签、样式

    感觉在Sublime Text3中写起来比较方便~~ 将HTML5中要用到的基本标签全部放在了一起,没有好好的整理,为了自己记忆的方便,就先这样写下来了~~ <!DOCTYPE html> ...

随机推荐

  1. Office文件的Open Xml 格式

    获取Office文件的Open Xml格式文件的步骤如下: 1.修改想要得到OpenXml格式文件的文件后缀名为.rar. 2.解压即可得到. 此时可以对xml文件进行操作,要想再次把这已经解压后的文 ...

  2. October 7th 2016 Week 41st Friday

    The land didn't move, but moved; the sea was not still, yet was still. 大地止而亦行,大海动而亦静. Remember that ...

  3. python基础——使用@property

    python基础——使用@property 在绑定属性时,如果我们直接把属性暴露出去,虽然写起来很简单,但是,没办法检查参数,导致可以把成绩随便改: s = Student() s.score = 9 ...

  4. hdu2302(枚举,大数取模)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2303 题意:给出两个数k, l(4<= k <= 1e100, 2<=l<=1 ...

  5. NYOJ之ASCII码排序

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsAAAAIFCAIAAABTaNy/AAAgAElEQVR4nO3dO1LjzMIG4H8T5CyEdF

  6. 数据结构之DFS与BFS实现

    本文主要包括以下内容 邻接矩阵实现无向图的BFS与DFS 邻接表实现无向图的BFS与DFS 理论介绍 深度优先搜索介绍 图的深度优先搜索(Depth First Search),和树的先序遍历比较类似 ...

  7. sql server 对象资源管理器(一)

    当需要查看具体数据库的所有用户表.存储过程等创建修改等脚本的时候,可以借用视图中的对象资源管理器的详细信息里面获取. 具体操作如下图所示:

  8. jquery学习笔记-----插件开发的编写总结

    一.对jQuery对象的扩展 ;(function($){ $.fn.extend(  { fun1:abc,fun2:1bc … } ) })(jQuery) 这里采用立即执行模式,即不用调用也能执 ...

  9. 数据结构和算法 – 4.字符串、 String 类和 StringBuilder 类

    4.1.String类的应用 class String类应用 { static void Main(string[] args) { string astring = "Now is The ...

  10. java 缩略图

    http://www.cnblogs.com/digdeep/p/4829471.html http://www.jb51.net/article/57648.htm http://blog.csdn ...