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 ...
随机推荐
- Python模块之virtualenvwrapper
Python的virtualenv工具可以创建隔离的Python环境, virtualenvwrapper是virtualenv的进一步封装工具,可以让它更好用. 安装 Linux 系统下: pip ...
- Git Authoritative Guide 学习
一.git命令1.git add -u : 将工作区中所有改动的文件添加到暂存区(修改.删除),但是不提交未被git跟踪的文件 -i : 可以进入交互界面选择性提交 -A : 相对于-u,它还提交新建 ...
- POJ_2299 Ultra-QuickSort【归并排序】
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u013912596/article/details/35655703 题目链接:http://poj ...
- 走进windows编程的世界-----消息处理函数（1）
Win32消息机制 过程驱动:程序是依照我们预先定义好的顺序运行.每运行一步,下一步都已经依照预定的顺序 继续运行,直至程序结束. 事件驱动:程序的运行顺序是无序的.某个时间点所运行的 ...
- xml时间配置
这些星号由左到右按顺序代表 : * * * * * * * 秒 分 时 日 月 周 年 序号 说明 是否必填 允许填写的值 允许的通配符 秒 是 0-59 , - * / 分 是 0-59 , - * ...
- Apache mod_rewrite实现HTTP和HTTPS重定向跳转
当你的站点使用了HTTPS之后,你可能会想把所有的HTTP请求(即端口80的请求),全部都重定向至HTTPS(即端口443).这时候你可以用以下的方式来做到:(Apache mod_rewrite) ...
- 回归cnBlogs
一.最近的想法 最近几天看了好多IT和非IT朋友的技术博客和自媒体博客,本想自己搭建一个独立博客,查了好多资料,各种方法,比如:goDaddy购买域名,利用GitHub免费空间搭博客. ...
- bzoj1819 电子词典
Description 人们在英文字典中查找某个单词的时候可能不知道该单词的完整拼法,而只知道该单词的一个错误的近似拼法,这时人们可能陷入困境,为了查找一个单词而浪费大量的时间.带有模糊查询功能的电子 ...
- bzoj2765 铁人双项比赛
Description 铁人双项比赛是吉林教育学院的一项传统体育项目.该项目比赛由长跑和骑自行车组成,参赛选手必须先完成k公里的长跑,然后完成r公里的骑车,才能到达终点.每个参赛选手所擅长的项目不同, ...
- AspectJ入门
AOP的实现方式有两种: AOP框架在编译阶段,就对目标类进行修改,得到的class文件已经是被修改过的.生成静态的AOP代理类(生成*.class文件已经被改掉了,需要使用特定的编译器).以Aspe ...