HTML5中lineCap端点样式遇到closePath()
定义和用法
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()的更多相关文章
- html5 中的 css样式单 的 两种调用方式的区别
在 html5 中 使用 css 样式单的方式 有4种: 1.链接外部样式文件:将样式文件 彻底与 html 文档分离,样式文件需要额外引入,这种情况下 一批样式 可以控制多份文档.对于好多文件都共有 ...
- HTML5 canvas 中的线条样式
线条样式属性 lineCap 设置或返回线条的结束端点样式 butt 默认.向线条的每个末端添加平直的边缘. round 向线条的每个末端添加圆形线帽. ...
- HTML5中input[type='date']自定义样式
HTML5提供了日历控件功能,缩减了开发时间,但有时它的样式确实不如人意,我们可以根据下面的代码自行修改. 建议:复制下面的代码段,单独建立一个css文件,方便我们修改. /* 修改日历控件类型 */ ...
- 【转】html5中如何去掉input type date默认样式
html5中如何去掉input type date默认样式1.时间选择的种类:HTML代码: 选择日期:<input type="date" value="2017 ...
- html5中如何去掉input type date默认样式
html5中如何去掉input type date默认样式 1.时间选择的种类: HTML代码: 选择日期:<input type="date" value="20 ...
- HTML5中的 Canvas
什么是Canvas? Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像.Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度.JavaScript代码可以访问该地区,通过 ...
- HTML5 中的 canvas 画布(一)
---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...
- HTML5中id可以用数字开头,但在css中不能正常使用
昨晚在看<响应式Web设计:html5和css3实战>时,书中提到“HTML5中的ID指可以用数字开头”.这个还真不知道,于是测试了一下,发现了问题. 在H5描述中是这样说的: 在css样 ...
- HTML5基本标签、样式
感觉在Sublime Text3中写起来比较方便~~ 将HTML5中要用到的基本标签全部放在了一起,没有好好的整理,为了自己记忆的方便,就先这样写下来了~~ <!DOCTYPE html> ...
随机推荐
- Office文件的Open Xml 格式
获取Office文件的Open Xml格式文件的步骤如下: 1.修改想要得到OpenXml格式文件的文件后缀名为.rar. 2.解压即可得到. 此时可以对xml文件进行操作,要想再次把这已经解压后的文 ...
- October 7th 2016 Week 41st Friday
The land didn't move, but moved; the sea was not still, yet was still. 大地止而亦行,大海动而亦静. Remember that ...
- python基础——使用@property
python基础——使用@property 在绑定属性时,如果我们直接把属性暴露出去,虽然写起来很简单,但是,没办法检查参数,导致可以把成绩随便改: s = Student() s.score = 9 ...
- hdu2302(枚举,大数取模)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2303 题意:给出两个数k, l(4<= k <= 1e100, 2<=l<=1 ...
- NYOJ之ASCII码排序
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsAAAAIFCAIAAABTaNy/AAAgAElEQVR4nO3dO1LjzMIG4H8T5CyEdF
- 数据结构之DFS与BFS实现
本文主要包括以下内容 邻接矩阵实现无向图的BFS与DFS 邻接表实现无向图的BFS与DFS 理论介绍 深度优先搜索介绍 图的深度优先搜索(Depth First Search),和树的先序遍历比较类似 ...
- sql server 对象资源管理器(一)
当需要查看具体数据库的所有用户表.存储过程等创建修改等脚本的时候,可以借用视图中的对象资源管理器的详细信息里面获取. 具体操作如下图所示:
- jquery学习笔记-----插件开发的编写总结
一.对jQuery对象的扩展 ;(function($){ $.fn.extend( { fun1:abc,fun2:1bc … } ) })(jQuery) 这里采用立即执行模式,即不用调用也能执 ...
- 数据结构和算法 – 4.字符串、 String 类和 StringBuilder 类
4.1.String类的应用 class String类应用 { static void Main(string[] args) { string astring = "Now is The ...
- java 缩略图
http://www.cnblogs.com/digdeep/p/4829471.html http://www.jb51.net/article/57648.htm http://blog.csdn ...