<!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. wpf 客户端【JDAgent桌面助手】开发详解（三） 瀑布流效果实现与UI虚拟化优化大数据显示

    目录区域: 业余开发的wpf 客户端终于完工了..晒晒截图 wpf 客户端[JDAgent桌面助手]开发详解-开篇 wpf 客户端[JDAgent桌面助手]详解(一)主窗口 圆形菜单... wpf 客 ...

  2. Entities、pads、links 实体、垫、链接

    Entities.pads.links 实体.垫.链接 Entities:1.实体由一个struct media_entity实例表示.结构通常嵌入到一个较高级别的结构,例如v4l2_subdev或v ...

  3. solr 6.2.1环境搭建

    一:Solr简介 Solr是一个独立的企业级搜索应用服务器,它对外提供类似于Web-service的API接口.用户可以通过http请求,向搜索引擎服务器提交一定格式的XML文件,生成索引:也可以通过 ...

  4. dbt- 数据构建工具

    dbt(数据构建工具)是一个命令行工具,只需编写select语句即可转换仓库中的数据. dbt处理将这些select语句转换为表和视图.DBT帮助做T的ELT(提取,加载和转换) 的过程-它不提取或加 ...

  5. 使用python生成词云

    什么是词云呢? 词云就是一些关键词组成的一个图片.大家在网上经常看到,下面看一些例子: 那用python生成一个词云的话怎么办呢,首先要有一些词,咱们随便找个吧,用see you again的歌词好了 ...

  6. redis 报错及解决

    报错: (error) MISCONF Redis is configured to save RDB snapshots, but it is currently not able to persi ...

  7. protobuf生成

    1,文件路径匹配好在src/main/proto下面 https://blog.csdn.net/u010939285/article/details/78538927

  8. 切图js

    首先引用一段关于拖动,缩放,剪切的基础代码 /* * 作者:http://cloudgamer.cnblogs.com/ * * 改进与增强 * 作者:http://yoker.sc0826.com/ ...

  9. wxWidgets：wxApp概述

    在我们编写wxWidgets应用程序的时候,我们不需要为之定义一个main函数:不过我们需要实现wxApp派生类的一个成员函数OnInit,它的地位大致等价于一般C++程序中的main. 一般来说On ...

  10. BASIC-17_蓝桥杯_矩阵乘法

    示例代码: #include <stdio.h>#define N 30 int main(void){ int n = 0 , m = 0 , sum = 0; int i = 0 , ...