<!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. geotrellis使用（二十二）实时获取点状目标对应的栅格数据值

    目录 前言 实现方法 总结 一.前言        其实这个功能之前已经实现,今天将其采用1.0版的方式进行了重构与完善,现将该内容进行总结.        其实这个功能很常见,比如google地球上 ...

  2. php广告图片循环播放 幻灯片效果

    <!DOCTYPE> <html> <head> <meta http-equiv="content-type" content=&quo ...

  3. PHPStorm如何配置,phpstorm的mac配置文件目录

    PHPStorm的配置分为2大类:项目配置和IDE配置. 项目配置(设置),主要是配置具体项目.IDE 配置(设置),通用的设置会应用到所有的项目上. 项目配置每个项目的配置存储在项目所在目录的 .i ...

  4. serviceStack.Redis 在PooledRedisClientManager 中设置密码

    ServiceStack.Redis 是一个C#访问Redis的客户端,可以说可以通过它实现所有需要Redis-Cli的功能.但是今天我在主Redis 实例设置了访问密码,而在slave 上没有设置, ...

  5. QRCode

    这个星期, 领导要我总结项目中用到的一些技术, 然后交付文档. 嘿嘿, 奉命整理. 二维码, 相信很多项目中都会要求生成这个, 然后由手机端去扫描, 或存储一些详情信息, 或存储一条链接, 可以快捷访 ...

  6. C#动态编译

    C#提供了DynamicObject和IDynamicMetaObjectProvider两种方式实现动态类型,动态类型的好处是类型的公有接口可以在运行时改变. 创建动态类型最简单的方法就是继承Dyn ...

  7. 关于SQL Server 安装程序在运行 Windows Installer 文件时遇到错误

    前几日安装sql server2008r2 的时候碰到这个问题: 出现以下错误: SQL Server 安装程序在运行 Windows Installer 文件时遇到错误. Windows Insta ...

  8. win10与ubuntu下演示运行.net core rc2 1.0.0.3002702程序

    随着.net core rc2(1.0.0.002702)发布的同时,我们也来在本地 win10与ubuntu玩一下吧. 先简单说下.net core ,在.net core rc1中用的是dnx 工 ...

  9. Newtonsoft.Json(Json.Net)学习笔记

    Newtonsoft.Json 在Vs2013中就有自带的: 下面是Json序列化和反序列化的简单封装: /// <summary> /// Json帮助类 /// </summar ...

  10. order by用法

    此文来源于CSDN中zxcvg的博文 1.ORDER BY 中关于NULL的处理 缺省处理,Oracle在Order by 时认为null是最大值,所以如果是ASC升序则排在最后,DESC降序则排在最 ...