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 ...
随机推荐
- jQuery--- .hasOwnProperty 用法
☆ obj.hasOwnProperty('prop'): 是用来判断一个对象是否有你给出名称的属性或对象.不过需要注意的是, 此方法无法检查该对象的原型链中是否具有该属性,该属性必须是对象本身的一个 ...
- Html页面Dom对象之Element
HTML DOM Element 对象 HTML DOM 节点 在 HTML DOM (文档对象模型)中,每个部分都是节点: 文档本身是文档节点 所有 HTML 元素是元素节点 所有 HTML 属性是 ...
- nuclio kubernetes 部署
一张参考架构图: 从图中可以看到nuclio可以运行到docker 以及kubernetes中 提供了kubernetes 部署的脚本 安装 创建命名空间 kubectl create namespa ...
- GPG key retrieval failed: [Errno 14] Could not open/read file:///etc/pki/rpm-gpg/RPM-GPG-KEY-CentOS-
今天更新为163的源后,yum的时候报错:GPG key retrieval failed: [Errno 14] Could not open/read file:///etc/pki/rpm-gp ...
- S5PV210 移植无线wifi网卡 MT7601
一.准备工作 1.MT7601驱动下载 点击下载 2.插入usb WiFi 启动开发板linux,lsusb查看usb驱动 Bus 001 Device 003: ID 148f:7601看到的是该驱 ...
- 【转】每天一个linux命令（13）：less 命令
原文网址:http://www.cnblogs.com/peida/archive/2012/11/05/2754477.html less 工具也是对文件或其它输出进行分页显示的工具,应该说是lin ...
- MFC信号量使用指南
DEMO程序:TestSemaphore_DEMO.rar 源代码:TestSemaphore_SRC.rar ---关键代码如下--- void CTestSemaphoreDlg::OnBnCli ...
- Angular 4.0 安装组件
安装组件 ng g componet 组件名
- ERROR 1130 (HY000): Host '192.168.20.165' is not allowed to connect to this MySQL server
问题 远程连接mysql时遇到如下问题: ERROR 1130 (HY000): Host '192.168.20.165' is not allowed to connect to this MyS ...
- Maven 生成项目站点
Maven 不仅仅时一个自动化构建工具和一个依赖管理工具,他还能够帮助聚合项目信息,促进团队间的交流,POM 可以包含各种项目信息,如项目描述.版本控制系统地址.缺陷跟踪系统地址.许可证信息.开发者信 ...