<canvas id="canvas" style="border:1px solid #f00;"></canvas>

公用js:

var canvas = document.getElementById("canvas");
canvas.width = 600;
canvas.height = 600;//此处也可直接在标签中添加width height属性
var context = canvas.getContext("2d");

绘制直线:

context.moveTo(100,100);//状态
context.lineTo(200,200);//状态 直线
context.lineWidth = 6;
context.strokeStyle = "#00f";
context.stroke();//绘制边框

效果如图:

绘制三角形(空心):

context.moveTo(100,100);//状态  起点
context.lineTo(200,200);//状态 直线
context.lineTo(100,200);
context.lineTo(100,100);//直角三角形 context.lineWidth = 6;//边框宽度
context.strokeStyle = "#00f";//边框颜色
context.stroke();//绘制边框

效果如图:

从效果图中可以看出最后的点并没有完全闭合,此处可使用lineCap属性,在上面代码中加上

context.lineCap="round";//butt,round,square

效果如下:

只有最后一点是圆形,而另外两个角处是非圆形(???????)

绘制三角形(实心):

context.moveTo(100,100);//状态  起点
context.lineTo(200,200);//状态 直线
context.lineTo(100,200);
context.lineTo(100,100);//直角三角形 context.lineWidth = 6;
context.lineCap = "round";
context.strokeStyle = "#00f";
context.stroke();//绘制边框(边框不能完全闭合??????) context.fillStyle="rgb(255,0,0)";
context.fill();//填充背景色

效果如图:

在三角形(实心)基础上绘制另一条直线:

context.moveTo(100,100);//状态  起点
context.lineTo(200,200);//状态 直线
context.lineTo(100,200);
context.lineTo(100,100);//直角三角形 context.lineWidth = 6;
context.lineCap = "round";
context.strokeStyle = "#00f";
context.stroke();//绘制边框(边框不能完全闭合??????) context.fillStyle="rgb(255,0,0)";
context.fill();//填充背景色
//绘制另一条直线
context.moveTo(200,100);
context.lineTo(300,200);
context.strokeStyle="#0f0";
context.lineWidth = 2;//此处宽度比上面宽度小,因此三角形边框最内侧会被新边框覆盖
context.stroke();

效果如图:注意三角形边框(设置宽度不同)

若将第二个的lineWidth 也设置为6,效果如下图:

//绘制另一条直线
context.moveTo(200,100);
context.lineTo(300,200);
context.strokeStyle="#0f0";
context.lineWidth = 6;//此处宽度:2时比上面宽度小,因此三角形边框最内侧会被新边框覆盖
context.stroke(); context.fillStyle="#00f";
context.fill();

三角形边框宽度明显不为6(???????)

绘制不同路径使用beginPath及closePath:

context.beginPath();//开启
context.moveTo(100,100);//状态 起点
context.lineTo(200,200);//状态 直线
context.lineTo(100,200);
context.lineTo(100,100);//直角三角形
context.closePath();//关闭 context.lineWidth = 6;
context.lineCap = "round";
context.strokeStyle = "#00f";
context.stroke();//绘制边框(边框不能完全闭合??????) context.fillStyle="rgb(255,0,0)";
context.fill();//填充背景色
//绘制另一条直线
context.beginPath();//开启
context.moveTo(200,100);
context.lineTo(300,200);
context.closePath();//关闭 context.strokeStyle="#0f0";
context.lineWidth = 6;//此处宽度:2时比上面宽度小,因此三角形边框最内侧会被新边框覆盖
context.stroke(); context.fillStyle="#00f";
context.fill();

Canavs初学的更多相关文章

  1. DDD初学指南

    去年就打算总结一下,结果新换的工作特别忙,就迟迟没有认真动手.主要内容是很多初学DDD甚至于学习很长时间的同学没有弄明白DDD是什么,适合什么情况.这世界上没有银弹,抛开了适合的场景孤立的去研究DDD ...

  2. gulp初学

    原文地址:gulp初学 至于gulp与grunt的区别,用过的人都略知一二,总的来说就是2点: 1.gulp的gulpfile.js  配置简单而且更容易阅读和维护.之所以如此,是因为它们的工作方式不 ...

  3. 初学seaJs模块化开发,利用grunt打包,减少http请求

    原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...

  4. 初学Vue2.0--基础篇

    概述: 鉴于本人初学,使用的编译器是webStorm,需添加对VUE的支持,添加方法可以参考 http://www.jianshu.com/p/142dae4f8b51. 起步: 1. 扎实的 Jav ...

  5. 初学Python

    初学Python 1.Python初识 life is short you need python--龟叔名言 Python是一种简洁优美语法接近自然语言的一种全栈开发语言,由"龟叔&quo ...

  6. Javascript初学篇章_5(对象)

    对象 Javascript是一种面向对象的语言,因此可以使用面向对象的思想来进行javascript程序设计对象就是由一些彼此相关的属性和方法集合在一起而构成的一个数据实体.举个例子,一只猫是个对象, ...

  7. 初学Objective-C语言需要了解的星星点点

             其实大多数开发初学者都有一些相同的特点,可以说是一种“职业病”.Most有其他平台开发基础的初学者,看到Xcode就想摩拳擦掌:看到Interface Builder就想跃跃欲试:而 ...

  8. matlab初学之句柄

    文章出处:http://www.cnblogs.com/CBDoctor/archive/2012/04/06/2434072.html 在matlab中,每一个对象都有一个数字来标识,叫做句柄.当每 ...

  9. 初学HTML5、初入前端

    学习HTML5是一个漫长的过程,当中会遇到很多技术与心态上的变化.刚开始学习,我们不能发力过猛,需要一个相对稳定的状态去面对.多关注一些自己感兴趣的网站和技术知识,建立自己的信心与好奇心,为以后的学习 ...

随机推荐

  1. java.lang.NoSuchMethodError: com.google.common.hash.HashFunction.hashInt(I)Lcom/google/common/hash/HashCode; 解决办法

    今天在java 上运行spark查询的时候出现一个问题: java.lang.NoSuchMethodError: com.google.common.hash.HashFunction.hashIn ...

  2. 好文 | MySQL 索引B+树原理,以及建索引的几大原则

    Java技术栈 www.javastack.cn 优秀的Java技术公众号 来源:小宝鸽 blog.csdn.net/u013142781/article/details/51706790 MySQL ...

  3. Oracle SQL外连接

    SQL提供了多种类型的连接方式,它们之间的区别在于:从相互交叠的不同数据集合中选择用于连接的行时所采用的方法不同.连接类型        定义内连接           只连接匹配的行左外连接     ...

  4. ios position:fixed 上滑下拉抖动

    ios position:fixed 上滑下拉抖动 最近呢遇到一个ios的兼容问题,界面是需要一个头底部的固定的效果,用的position:fixed定位布局,写完测试发现安卓手机正常的,按时ios上 ...

  5. vue echart例——柱状图及高度自适应

    1.安装 npm install echarts -s 2.例——点击tab切换时柱状图重绘,高度根据返回数据设置. <template> <div> <ul id=&q ...

  6. 了解JNI技术

    在线文库系统用到了Jacob,它是基于JNI技术实现的,通过调用MS Office的Com接口实现,我这里对JNI技术进行一个学习. 基本上JNI技术相当于一个代理,因为java的跨平台特性,所以它自 ...

  7. (转)lua protobuffer的实现

    转自: http://www.voidcn.com/article/p-vmuovdgn-bam.html (1)lua实现protobuf的简介 需要读者对google的protobuf有一定的了解 ...

  8. 三角形的实现和盒模型、层模型、浮动模型、定位、权重、margin问题

    相邻的border会平分所占的区域,出现一个斜线, .my_triangle{ width: 10px; height: 10px; background-color: blue; border-wi ...

  9. Android开发 View的UI刷新Invalidate和postInvalidate

    Invalidate 正常刷新 /** * 使整个视图无效.如果视图可见, * {@link #onDraw(android.graphics.Canvas)} 调用此方法后将在后续的UI刷新里调用o ...

  10. MySql General error:2006

    当启用模块时发生Mysql数据库错误,错误信息见附件,实际是“General error: 2006 MySQL server has gone away......”错误. 解决方法:找到my.in ...