<!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. 如何高效地向Redis插入大量的数据

    最近有个哥们在群里问,有一个日志,里面存的是IP地址(一行一个),如何将这些IP快速导入到Redis中. 我刚开始的建议是Shell+redis客户端. 今天,查看Redis官档,发现文档的首页部分( ...

  2. 计时器StopWatch示例

    计时器 StopWatch stwatch = new StopWatch(getClass().getSimpleName()); try{ stwatch.start(joinPoint.getS ...

  3. 用PHP抓取页面并分析

    在做抓取前,记得把php.ini中的max_execution_time设置的大点,不然会报错的.

  4. Cesium原理篇：3最长的一帧之地形(4：重采样)

           地形部分的原理介绍的差不多了,但之前还有一个刻意忽略的地方,就是地形的重采样.通俗的讲,如果当前Tile没有地形数据的话,则会从他父类的地形数据中取它所对应的四分之一的地形数据.打个比方 ...

  5. C# 将内容写入txt文档

    <1>  FileStream fs = new FileStream(@"D:\text.txt", FileMode.Append); StreamWriter s ...

  6. MongoDB-基础-limit-skip-sort

    MongoDB Limit() 方法 如果你需要在MongoDB中读取指定数量的数据记录,可以使用MongoDB的Limit方法,limit()方法接受一个数字参数,该参数指定从MongoDB中读取的 ...

  7. DNS知识指南

    1. 什么是记录? 记录的实质是存在DNS服务器叶结点上的一条映射(只讨论权威DNS,不讨论Local DNS). A记录:(域名:IP地址) 例:cnblogs.com   A  42.121.25 ...

  8. 迷惑很久，仅以个人想法谈谈MVC架构，希望大家多给点意见

    博主是非科班出身,所以和大部分新手有着一样的困惑,究竟什么才能算是MVC框架,总是在谈Model,View,Controller分离,可是究竟什么才能算是分离,而他们又是负责什么样的分工呢. 大二的时 ...

  9. .NET正则表达式基础入门（一）

    字符组 正则表达式的字符组十分简单,就是列出你所想要匹配的字符.阅读本章前,建议先下载我于CSDN上传的示例代码,下载无需分数,下载链接. 1.普通字符组 普通字符组,列出所有你需要匹配的字符. 例如 ...

  10. javascript超过容器后显示省略号效果(兼容一行或者多行)

    javascript超过容器后显示省略号效果       在实际的项目中,由于文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div(或其他标签,下同)区域的情况,此时比较好的做法就是 ...