<!DOCTYPE HTML> <head> <meta charset = "utf-8"> <title>starGirl</title> <style type="text/css"> #canvas{border:1px solid #eee ; display:block; background-color: #B36666; margin: 20px auto; } </style> </head> <body> <div> <canvas id = "canvas" width = "800px" height = "600px"></canvas> </div> <script type = "text/javascript" >
window.onload=function(){
var canvas = document.getElementById('canvas');
//设置高宽，不建议在css里面设置，因为会不准确
canvas.height=500;
canvas.width=800;
var context = canvas.getContext('2d');

/*
lineJoin 属性：见效果
context.lineJoin='miter';
context.lineJoin='round';
context.lineJoin='bevel';
*/
context.lineWidth = 20;
context.beginPath();
context.moveTo(10,20);
context.lineTo(10,400);
context.lineTo(90,20);
context.lineCap='butt'; //默认
context.lineJoin='miter'; //默认
context.strokeStyle="red";
context.stroke();

context.beginPath();
context.moveTo(120,20);
context.lineTo(120,400);
context.lineTo(200,20);
context.lineJoin='round';
context.strokeStyle="yellow";
context.stroke();

context.beginPath();
context.moveTo(220,20);
context.lineTo(220,400);
context.lineTo(320,20);
context.lineJoin='bevel';
context.strokeStyle="green";
context.stroke();

/*
miterLimit 属性：默认值是10,
下面的方法，因为线与线之间的角度太少，context.lineJoin='miter'会失效
解决方法：context.miterLimit=20或者更大
*/
context.beginPath();
context.moveTo(340,20);
context.lineTo(340,400);
context.lineTo(400,20);
//context.miterLimit=10;默认值
context.miterLimit=20;//
context.lineJoin='miter';
context.strokeStyle="green";
context.stroke();
}
</script> </body> </html>

miterLimit和lineJoin属性的更多相关文章

  1. HTML5的动画学习历程

    一.三角学原理. function getRadio(d){//根据角度获得弧度,                return d*Math.PI/180;                }, fun ...

  2. canvas学习笔记之2d画布基础的实现

    一. Canvas是啥 < canvas > 是一个可以使用脚本(通常是js)来绘图的HTML元素 < canvas > 最早由Apple引入WebKit,用于Mac OS X ...

  3. Android 开发 VectorDrawable 矢量图 （二）了解矢量图属性与绘制

    VectorDrawable 矢量图 三部曲: Android 开发 VectorDrawable 矢量图 (一)了解Android矢量图与获取矢量图 Android 开发 VectorDrawabl ...

  4. canvas绘图详解笔记之线条及线条属性

    创建 canvas 首先创建一个canvas元素,我们只需要在html文件中加入这么一句代码: <canvas id="canvas">当前浏览器不支持canvas,请 ...

  5. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  6. H5(三)

    Canvas(画布)   基本内容     简单来说,HTML5提供的新元素<canvas>     Canvas在HTML页面提供画布的功能       在画布中绘制各种图形     C ...

  7. IOS Core Animation Advanced Techniques的学习笔记(五)

    第六章:Specialized Layers   类别 用途 CAEmitterLayer 用于实现基于Core Animation粒子发射系统.发射器层对象控制粒子的生成和起源 CAGradient ...

  8. HTML5资料

    1 Canvas教程 <canvas>是一个新的用于通过脚本(通常是JavaScript)绘图的HTML元素.例如,他可以用于绘图.制作图片的组合或者简单的动画(当然并不那么简单).It ...

  9. 了解canvas

    目录 [1]HTML属性[2]CSS样式 [3]API 坐标 填充和描边 阴影 绘制矩形 绘制路径 绘制文本 绘制图像 使用图像 变换 合成 [4]DEMO 前面的话 canvas元素是HTML5最受 ...

随机推荐

  1. linux管理进程的链表

    linux2.6.11的内核中,为了方便管理linux的进程,主要建了5种linux链表.每个链表节点之间的互联有两种方式,一种是hash节点之间的互联,通过hlist_node的数据结构来实现:另一 ...

  2. 关于纠正 C/C++ 之前在函输内改变 变量的一个错误想法。

    再这之前,我曾认为,一个变量只要定义为全局变量后,即使把它以传参的方式传进去一个函数内,也能改变它的值 事实证明,这一想法是错的. 下面我用代码说明,具体注释将写在里面 #include<std ...

  3. js正则表达式语法

    1. 正则表达式规则 1.1 普通字符 字母.数字.汉字.下划线.以及后边章节中没有特殊定义的标点符号,都是"普通字符".表达式中的普通字符,在匹配一个字符串的时候,匹配与之相同的 ...

  4. Visula Studio 2013/2015自定义快捷键

    很多同学新装了VS2013/2015后, 发现快捷键变掉了, 比如之前编译快捷键是F6, 现在变成Ctrl + Shift + B, 其实要改回去很简单, 菜单Tools->Options, 打 ...

  5. 【Tip】如何让引用的dll随附的xml注释文档、pdb调试库等文件不出现在项目输出目录中

    项目输出目录(bin/debug|release)中经常是这个样子: main.exemain.pdb a.dll a.xml b.dll b.pdb b.xml ... 其中xml是同名dll的注释 ...

  6. socket编程-java

    一,网络编程中两个主要的问题 一个是如何准确的定位网络上一台或多台主机,另一个就是找到主机后如何可靠高效的进行数据传输. 在TCP/IP协议中IP层主要负责网络主机的定位,数据传输的路由,由IP地址可 ...

  7. SQL SERVER2012附加 （PS：开始试过sql2012直接附加失败）

    Northwind 示例数据库下载:  NORTHWND.MDF   (PS:开始试过sql2012直接附加失败) 新建查询-执行下面代码 USE [master] GO CREATE DATABAS ...

  8. How do I see all foreign keys to a table or column?

    down voteaccepted For a Table: SELECT TABLE_NAME,COLUMN_NAME,CONSTRAINT_NAME, REFERENCED_TABLE_NAME, ...

  9. linux下 nginx、php-fpm、mysql 开机自启动

    1.分别为每个编写shell脚本放入/etc/init.d下,添加service服务 2.把每个service服务加入到chkconfig列表 这里我们以php-fpm为例说明下步骤: php-fpm ...

  10. UDS(ISO14229-2006) 汉译(No.1 范围)

    ISO14229指定的数据链路是独立于诊断服务的,该数据链路允许测试仪(Client)操作ECU(Server)中的诊断功能(如电子燃油喷射.变速箱.ABS等)并接入一条嵌入车辆的串行数据链路.它指定 ...