定义和用法

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. supersr--图片轮播逻辑

    // //  ViewController.m // 图片轮播 // //  Created by apple on 14-5-18. //  Copyright (c) 2014年  All rig ...

  2. [Android Pro] APK

    svn updatesvn status ls -alsvn log --limit 8 > RELEASE_NOTE.txt cat RELEASE_NOTE.txt chmod a+x gr ...

  3. 对于类的双重调用的demo

    代码如下: package cao.com.duixiang; public class TestCCircle { public static void main(String[] args) { ...

  4. IOS关于录音,播放实现总结

    //音频录制(标准过程5,9更新) 准备:导入AVFoundation框架及头文件 1 设置会话类型,允许播放及录音AVAudioSession *audioSession = [AVAudioSes ...

  5. Loadrunner中Throughput(吞吐量)的分析与计算

    Throughput翻译为吞吐量,按照常规理解网络吞吐量表示在单位时间内通过网卡数据量之和,其中即包括本机网卡发送出去的数据量也包括本机网卡接收到的数据量,但这个理解在Loadrunner记录的Thr ...

  6. Clr Via C#读书笔记---I/O限制的异步操作

    widows如何执行I/O操作      构造调用一个FileStream对象打开一个磁盘文件-----FileStream.Read方法从文件中读取数据(此时线程从托管代码转为本地/用户模式代码)- ...

  7. Faster-rnnlm代码分析2 - HSTree的构造

    也就是构造一棵Huffman Tree,输入是按照词汇频次由高到低排序的 采用层次SoftMax的做法,是为了使得训练和预测时候的softmax输出加速,原有multinomal softmax,是和 ...

  8. Linux Shell 高级编程技巧1----深入讨论(awk、<<)

    1.深入讨论(awk.<<)    1.1.深入讨论awk        记录和域,模式和动作,正则表达式和元字符            基础教程中已经介绍        条件和逻辑操作符 ...

  9. Linux环境下段错误的产生原因及调试方法小结

    转载自http://www.cnblogs.com/panfeng412/archive/2011/11/06/2237857.html 最近在Linux环境下做C语言项目,由于是在一个原有项目基础之 ...

  10. poj 1701【数学几何】

    The area Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Su ...