HTML5 Canvas ( 线段端点的样式 ) lineCap
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas</title>
<script type="text/javascript" src="../js/jQuery.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
outline: none;
border: none;
}
#canvas{
margin: auto auto;
width: 7rem;
margin: .25rem 0 0 1.5rem;
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="1000" height="600"></canvas>
</body>
</html>
<script type="text/javascript">
/**
* rem 布局初始化
*/
$('html').css('font-size', $(window).width()/10);
/**
* 获取 canvas 画布
* 获取 canvas 绘图上下文环境
*/
var canvas = $('#canvas')[0];
var cxt = canvas.getContext('2d'); /**
* 线条顶点的样式
*/
cxt.lineWidth = 40;
cxt.strokeStyle = 'red';
cxt.beginPath();
cxt.moveTo(100, 100);
cxt.lineTo(800, 300);
cxt.lineCap = "butt"; //线段端点的样式
cxt.stroke(); cxt.beginPath();
cxt.moveTo(100, 200);
cxt.lineTo(800, 400);
cxt.lineCap = "round"; //线段端点的样式
cxt.stroke(); cxt.beginPath();
cxt.moveTo(100, 300);
cxt.lineTo(800, 500);
cxt.lineCap = "square"; //线段端点的样式
cxt.stroke();
</script>
HTML5 Canvas ( 线段端点的样式 ) lineCap的更多相关文章
- [js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)
接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方 ...
- [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)
上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...
- HTML5 canvas 中的线条样式
线条样式属性 lineCap 设置或返回线条的结束端点样式 butt 默认.向线条的每个末端添加平直的边缘. round 向线条的每个末端添加圆形线帽. ...
- HTML5 Canvas ( 线段的绘制 ) beginPath, moveTo, strokeStyle, stroke
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 超酷！！HTML5 Canvas 水流样式 Loading 动画
今天我们要分享另外一款基于HTML5 Canvas的液体流动样式Loading加载动画,这款Loading动画在加载时会呈现液体流动的动画效果,并且由于和背景颜色的对比,也略微呈现发光的动画效果. 效 ...
- [js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标
有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 ...
- [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)
接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...
- html5 canvas 笔记二（添加样式和颜色）
色彩 Colors fillStyle = color 设置图形的填充颜色. strokeStyle = color 设置图形轮廓的颜色. 透明度 Transparency globalAlpha = ...
- HTML5 Canvas核心技术图形动画与游戏开发（读书笔记）----第一章，基础知识
一,canvas元素 1 为了防止浏览器不支持canvas元素,我们设置“后备内容”(fallback content),下面紫色的字即为后备内容 <canvas id="canvas ...
随机推荐
- OJ链接
BNU..好难找..http://www.bnuoj.com
- Struts2重新学习之自定义拦截器（判断用户是否是登录状态）
拦截器 一:1:概念:Interceptor拦截器类似于我们学习过的过滤器,是可以再action执行前后执行的代码.是web开发时,常用的技术.比如,权限控制,日志记录. 2:多个拦截器Interce ...
- V4L2控制驱动
1.应用如何知道设备支持那些特性的控制?一种典型的做法,V4L2 API提供了一种机制可以让应用能枚举可用的控制操作.为此,他们要发出最终由驱动videoc_queryctrl()方法实现的ioctl ...
- js模板引擎之juicer，特别好用
中文文档地址 https://www.npmjs.com/package/juicer Juicer基础知识:语法2 http://blog.163.com/lvshutao@126/blog/st ...
- JQuery 在网页中查询
最近遇到客户的一个需求,要在网页中添加一个Search 功能,其实对于网页的搜索,Ctrl+F,真的是非常足够了,但是客户的需求,不得不做,这里就做了个关于Jquery Search function ...
- 写了一篇关于 FastAdmin 插件路由的分析文章
写了一篇关于 FastAdmin 插件路由的分析文章 插件路由演示 ThinkPHP 的路由就像是整个应用的调度室,让你的应用 url 更友好,而且让应用更安全,不会让真实的地址暴露出去. 了解过 L ...
- 查询语句中 select from where group by having order by 的执行顺序
查询中用到的关键词主要包含六个,并且他们的顺序依次为 select--from--where--group by--having--order by 其中 select 和 from 是必须的,其他关 ...
- PHP中imagecopyresampled参数详解
原文链接http://blog.csdn.net/ajaxchen_615/article/details/5941181 做php缩微图程序,用到了imagecopyresampled函数,在网上找 ...
- bzoj4693: 雪中送温暖
Description 每年的1月10日是温暖节,在这一天,化身出题人的C_SUNSHINE将会给OIer们送温暖.OIer们只要在门口放上一个 仙人掌,就能在早上的某个时刻听到门外传来一声:“开门, ...
- bzoj 1288: Neighbours
Description 很久以前, 有一个小小的国度, 为了方便, 我们可以把它想象为一个大大的矩形, 矩形的左下角为(0, 0), 右上角为(w, h), 共有(w + 1) * (h + 1)个整 ...