当前位置: 首页 > 前端笔记 > JAVASCRIPTS > Canvas画一个三角形
2014年10八月

Canvas画一个三角形

从今天开始,打算系统来学习一下HTML5,那么就从Canvas开始,一直都是听说,功能强大能媲美Flash,在网上找了教程试了一下,确实不错,写法和AS3都很类似。

下面是源码,带了一些简单的注释。

<canvas id="mycanvas"></canvas>

Javascript代码:

try {
	var canvas = document.getElementById("mycanvas");
	var context = canvas.getContext("2d");
	
	context.beginPath(); //路径开始
	
	context.moveTo(150, 15); //默认点是0,0,现在要移动到 150,15这个坐标,也就是三角形的顶点坐标
	context.lineTo(20, 75); //这个是三角形左下的坐标
	context.lineTo(280, 75); //这个是右下点的坐标
	
	context.closePath(); //关闭路径
	
	context.fillStyle = "#339900"; //填充颜色
	context.fill(); //填充
	
	context.lineWidth = 5; //画笔的大小
	context.strokeStyle = "#000000"; //画笔的颜色
	
	context.stroke(); //在画布上输出
} catch(e){
	alert("你的浏览器不支持HTML5 Canvas,请升级你的浏览器或者更换其他浏览器!"); 
}

在线演示:Canvas画一个三角形.html

文章信息

  • 发布日期:2014年08月10日 17:41:03
  • 固定地址:http://www.estorm.cn/notes/javascripts/2014-08-10/html5-canvas-triangle.html