<!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. hdu2087 剪花布条 暴力/KMP

    在字符串中不可重叠地寻找子串数量,暴力/KMP #include<stdio.h> #include<string.h> int main(){ ],b[]; ]!='#'){ ...

  2. TP3.2整合kindeditor

    HTML   <!-- KE图片上传 --> <link rel="stylesheet" href="__PUBLIC__/kindeditor/th ...

  3. c#代码获取web.config配置文件里面设置的 <compilation debug="true"节点

    == 在我们的web.config文件中,有像下面的这样的一个配置, <system.web> <identity impersonate="true" user ...

  4. java调用.net的webservice

    目录(?)[-] 一参考文献 二概述 三实例 注意点   一.参考文献 1. http://www.cnblogs.com/xuqifa100/archive/2007/12/13/993926.ht ...

  5. ThinkPHP5 API 文档

    ThinkPHP5 API 文档 有了这个还是相当的方便,可以快速查找每个组件的方法和接口. https://yangweijie.github.io/thinkphp-lts/index.html# ...

  6. yii2 笔记（1）

    1.js文件加载顺序问题 在视图中引用js文件的时候,使用到jquery会报错,因为自定义的js文件在jquery之前被引入了. 由于jquery,bootstrap是在AppAsset中全局引入的, ...

  7. module.exports用法

    module.exports 对象是由模块系统创建的.在我们自己写模块的时候,需要在模块最后写好模块接口,声明这个模块对外暴漏声明内容,module.exports提供了暴漏接口的方法. 1.返回一个 ...

  8. golang defer的使用

    defer一般用于在函数结束时执行必要的处理工作.例如,关闭文件描述符,关闭网络连接等等. 函数中可以定义多个defer,执行的时候按照先进后出的顺序. defer定义的语句,即使遇到panic,也会 ...

  9. MySql数据库中敏感字段加密处理方案

    比如数据表中有一个手机号码字段是敏感字段,不想明文存储,可以是用MySQL的自带的函数处理 Table 12.17 Encryption Functions Name Description AES_ ...

  10. Winfrom 实现转圈等待

    1.放弃进度条.动态进度图片等方式实现用户体验优化方式(主要是优化用户等待体验),建议使用方式? 答:对于From或者Control而言,其提供了Cursor属性设置即可. 例如: this.Curs ...