<!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. Android随笔之——模拟按键操作的几种方式

    前几天转过一篇Android上模拟按键操作.触屏事件的博客,昨天又去找了百度.谷歌了一下,写了一点简单的测试代码,留待不时之需.有需要看之前转载的那篇博客的请看这里→_→转:Android随笔之——使 ...

  2. 如何部署Icinga服务端

    Icinga是Nagios的一个变种,配置,使用方式几乎一样,而且完全兼容Nagios的插件.所以下面的部署方案对Nagios同样使用. 它还推出了两个中文版本,icinga-cn原版和icinga- ...

  3. ios UIWebView 在开发中加载文件

    UIWebView 在实际应用中加载文件的时候,有两种情况, 1. 实行在线预览 , 2. 下载到本地,再查看 如果是第一种情况: NSURL *url = [NSURL URLWithString: ...

  4. 让你的JS更优雅的小技巧

    首先,看一个非常不优雅的例子: 看到这段代码,虽然代码很短,但是一眼看上去就不想再看了,也就是没什么可读性.这段代码,没有封装,随意定义一个变量都是全局变量,这样在多人开发或者是大型开发中,极其容易造 ...

  5. 1Z0-053 争议题目解析46

    1Z0-053 争议题目解析46 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 46.What happens when you run the SQL Tuning Adviso ...

  6. Front End Developer Questions 前端开发人员问题（二）

    问题来源:http://markyun.github.io/2015/Front-end-Developer-Questions/ 二.CSS 1.介绍一下标准的CSS的盒子模型?与低版本IE的盒子模 ...

  7. Android TextView中显示图片

    Android官方给我们提供的Html类下面的fromHtml方法 当你需要转换的HTML代码是带图片的,比如<IMG/>,那么你就需要使用到重载的第二个方法了,这个方法里面有个Image ...

  8. String的按值传递，java传参都是传值

    java中对象作为参数传递给一个方法,到底是值传递,还是引用传递? String和int参数传递是按值传递还是引用传递? 一道面试题目,String的传递: public String change( ...

  9. Rafy 领域实体框架演示(3) - 快速使用 C/S 架构部署

    本系列演示如何使用 Rafy 领域实体框架快速转换一个传统的三层应用程序,并展示转换完成后,Rafy 带来的新功能. <福利到!Rafy(原OEA)领域实体框架 2.22.2067 发布!> ...

  10. LINQ to SQL语句(13)之开放式并发控制和事务

    Simultaneous Changes开放式并发控制 下表介绍 LINQ to SQL 文档中涉及开放式并发的术语: 术语 说明 并发 两个或更多用户同时尝试更新同一数据库行的情形. 并发冲突 两个 ...