前言

将有关canvas的内容总结成笔记，方便自己看。最近有点浑浑噩噩，没了考试，以为会安安静静的学习，结果自己想太多了。。。。。。

什么是canvas

有关这个百度一下。。。。，个人理解是一块画布，能够完成各种炫丽的效果，之前看过一点three.js,而它应该是基于canvas的，印象中是的。有空想写有关three的demo,毕竟是真的好玩。

创建一个canvas

html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>canvas</title>
	<script type="text/javascript" src="index.js" charset="gb2312"></script>
</head>
<body onload="draw('canvas');">
	<h1>canvas</h1>
	<canvas id="canvas" width="400px" height="300px" style="margin: 0 auto"></canvas>
	
</body>
</html>

** 注意的是尽量使用htmlt的width和height属性或直接使用js动态来设置宽高，尽量不要使用css设置

使用js来获取canvas和上下文
js代码如下：

var canvas=document.getElementById(id);
	if(canvas==null){
		return false;
	}
	var context=canvas.getContext('2d');

其中使用getContext方法来获取上下文

填充样式和填充边框样式

语法      |  简介

代码如下：

1 2	context.fillStyle="#eeeeff"; context.fillRect(0,0,400,300);//绘制矩形

路径的有关方法和属性

创建路径

context.beginPath();

创建一个圆，其中第一和第二个参数表示起点坐标，第三个表示半径，第四和第五表示
开始角度和结束角度，第六表示是否逆时钟旋转，true表示是;

context.arc(i25,i25,i10,0,Math.PI2,true);

关闭路径

context.closePath();

创建一个椭圆x,y为起点坐标，radiusX,radusY为半径，startAngle和endAngle为开始角度和结束角度

context.elispse(x,y,radiusX,radiusY,tation,startAngle,endAngle,anticlockwise);

绘制直线

moveTo(x,y); //坐标移动到x,y作为起点
lineTo(x,y);//绘制直线作为终点

直线的有关属性

lineCap //为直线添加线帽
lineJoin //两直线相交时的形状

lizehong

分类

标签

归档

html_canvas笔记

前言

什么是canvas

创建一个canvas

路径的有关方法和属性