<!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的更多相关文章

  1. [js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)

    接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方 ...

  2. [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)

    上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...

  3. HTML5 canvas 中的线条样式

    线条样式属性 lineCap        设置或返回线条的结束端点样式 butt         默认.向线条的每个末端添加平直的边缘. round         向线条的每个末端添加圆形线帽. ...

  4. HTML5 Canvas ( 线段的绘制 ) beginPath, moveTo, strokeStyle, stroke

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 超酷！！HTML5 Canvas 水流样式 Loading 动画

    今天我们要分享另外一款基于HTML5 Canvas的液体流动样式Loading加载动画,这款Loading动画在加载时会呈现液体流动的动画效果,并且由于和背景颜色的对比,也略微呈现发光的动画效果. 效 ...

  6. [js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标

    有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 ...

  7. [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)

    接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...

  8. html5 canvas 笔记二（添加样式和颜色）

    色彩 Colors fillStyle = color 设置图形的填充颜色. strokeStyle = color 设置图形轮廓的颜色. 透明度 Transparency globalAlpha = ...

  9. HTML5 Canvas核心技术图形动画与游戏开发（读书笔记）----第一章，基础知识

    一,canvas元素 1 为了防止浏览器不支持canvas元素,我们设置“后备内容”(fallback content),下面紫色的字即为后备内容 <canvas id="canvas ...

随机推荐

  1. Linux安装python2.7、pip和setuptools

    一.说明 CentOS6.5自带python环境为2.6,公司的python环境为2.7. 为了避免出现以后代码出现版本差异,所以把自带的2 .6版本升级到了2.7,过程十分曲折.... 中途遇到的问 ...

  2. 监控分析——Web中间件

    发现 中间件监控看是否有性能瓶颈 核心:主要看中间件的线性池进程池有没有排队情况,请求是否处理及时就OK Apache 以前php都是用apache,现在基本用nginx了. 首先自己启动apache ...

  3. .csv 和 .xls 的区别

    .csv 和 .xls 的区别 .csv .xls 较为通用,易导入至各式表格.资料库等 Microsoft excel的专用档案 文本档案,用记事本就可以打开 二进位档案,只有用excel才能打开 ...

  4. VIPServer：阿里智能地址映射及环境管理系统详解

    http://geek.csdn.net/news/detail/110586 作者: 周遥,阿里技术专家,花名玄胤,毕业于四川大学.六年大型分布式与中间件系统经验,三项国家专利,参加过多次“双十一” ...

  5. python 函数参数的传递(参数带星号的说明) 元组传递 字典传递

    python中函数参数的传递是通过赋值来传递的.函数参数的使用又有俩个方面值得注意:1.函数参数是如何定义的 2.在调用函数的过程中参数是如何被解析 先看第一个问题,在python中函数参数的定义主要 ...

  6. C#中委托如何使用?(转帖)

    1.委托概述委托是C#中新加入的一个类型,可以把它想作一个和Class类似的一种类型,和使用类相似,使用一个委托时,需要两个步骤,首先你要定义一个委托,就像是定义一个类一样:然后,你可以创建一个或多个 ...

  7. <<APUE>> 线程

    一个进程在同一时刻只能做一件事情,线程可以把程序设计成在同一时刻能够做多件事情,每个线程处理各自独立的任务.线程包括了表示进程内执行环境必需的信息,包括进程中标识线程的线程ID.一组寄存器值.栈.调度 ...

  8. sql server 2008数据库 降为 sql server 2005数据库 最终方案总结

    由于xx原因,sql server 要降级,所以有了下文.... 一 直接 通过sql server 自带工具 生成脚本即可,具体操作方法如下: 1.打开 Microsoft Sql Server M ...

  9. 关于pandas里面的合并

    from pandas import * from numpy import * import json from pylab import * left = DataFrame({'key1':[' ...

  10. python程序里加入调试断点

    在需要打断的地方加入:import pdb;pdb.set_trace()即可 如: