HTML5的canvas画布细节学习(带你画出各种图形)

HTML zchao 443℃ 0评论

H5介绍和vanvas画布学习



从前端技术角度把互联网的发展分为三个阶段:

第一阶段是以Web1.0为主的网络阶段,前端主流技术是HTNL和CSS;

第二阶段是Web2.0的Ajax应用阶段,热门技术是JavaScript/DOM/异步数据请求;

第三阶段是HTML5+CSS3阶段,这将是一个崭新的时代。

HTML5相比之前有许多新特性,是开发更简洁,效率更高。

lHTML5 约等于 HTML+CSS3+ JAVASCRIPT API;

支持HTML5的浏览器有:目前Firefox、Chrom、Opera、Safari(版本4以上)、Internet Explorer 9。 你必须使用这些浏览器,才能浏览HTML5页面

HTML5相对于前几版新增功能

1.增加 <canvas> 标签
2.增加 <header> 和 <footer> 标签
3.增加音频和视频嵌入功能 <video> 和 <audio>
4.增加离线存储功能.
5.高级应用体验案例:语言识别,图像识别,html5游戏
6.支持更加强大的css3 (参考页面)
7.增加拖放,跨文档消息,浏览器历史管理等
8.增强各大浏览器的兼容性.

 


现在开始学习canvas画布的相关知识

HTML5-canvas画布坐标体系

下图说明了canvas 画布坐标系。坐标原点位于左上角,以像素为单位。像素是计算机屏幕上最小的显示单位。在canvas 画布坐标系中,第一个是x坐标,表示当前位置为水平方向,距离坐标原点x个像素;第二个是y坐标,表示当前位置为垂直方向,距离坐标原点y个像素。

坐标体系-像素

计算机显示器的分辨率是800×600,表示计算机屏幕上的每一行由800个点组成,共有600行,整个计算机屏幕共有480 000个像素。

 


 

下面直接写H5代码,如果想要先学习H5之前的版本,请到本站学习笔记中PHP学习笔记下学习html的知识。

可以使用的编辑器有很多,如notepad,editplus,eclipse等等,也可以用windows自带的记事本(所有的代码全部自己敲出来,这个刚开始学习很好,很练你的耐力),这里我使用的并且推荐的是HBuilder,它可以实时预览,就是边敲代码,边看效果,很方便,随时看到自己做的效果。HBuilder如果自己下不好,可以给我留言,我会给你发送过去。

通过判断getContext函数是否存在来判断你的浏览器是否支持canvas元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>canvas画布</title>
</head>
<body>

<!-- 画布的绘图区域-->
<canvas id="myCanvas" style="border: 5px solid red;" width="400" height="200">
您的浏览器不支持canvas元素,请更新或更换其他浏览器。
</canvas>
<!--判断浏览器是否支持canvas-->
<script type="text/javascript">

<!-- 获取canvas元素-->

var c=document.getElementById("myCanvas");

if(c.getContext){
alert(您的浏览器支持canvas!);
}else{
alert(您的浏览器不支持canvas!);
}

</script>

</body>
</html>

画出直线,如下主要代码

<script type="text/javascript">

var c=document.getElementById("myCanvas");
<!-- 获取绘制2D的上下文环境-->
var context=c.getContext("2d");

context.moveTo(50,25);<!-- 建立新的子路径,开始点的坐标-->
context.lineTo(200,100);<!--从开始点到规定点的一条直线,结束点的坐标-->
context.stroke();<!-- 沿着上面的路径绘制出一条直线-->

</script>

如下图:

画出实心矩形

<script type="text/javascript">

var c=document.getElementById("myCanvas");

var context=c.getContext("2d");

//fill填充fillRect填充区域
context.fillStyle="#FF00FF";
context.fillRect(10,10,200,100);

//颜色表示方法
// context.fillStyle="#FF0000";//十六进制
// context.fillStyle="red";//颜色名称
// context.fillStyle="rgb(250,0,0)";//rgb函数
// context.fillStyle="rgb(100%,0%,0%)";//rgb百分比值
// context.fillStyle="rgba(255,0,0,1)";//rgba半透明值

</script>

如下图所示:

画出空心矩形

<script type="text/javascript">

var c=document.getElementById("myCanvas");

var context=c.getContext("2d");

//stroke是轮廓,strokeText轮廓或线条
context.strokeStyle="#00FF00";   //设置颜色
context.strokeRect(10,10,100,50);

</script>

如图所示:

画出圆形

<script type="text/javascript">

var c=document.getElementById("myCanvas");

var context=c.getContext("2d");

context.fillStyle="#FF00FF";

context.beginPath();//开始绘制
context.arc(100,75,50,0,Math.PI*2,true);
//100,75为圆心坐标,50是半径长度,0是开始角度,Math.PI*2是结束角度,true是顺时针绘制
context.closePath();//封闭起点和终点
context.fill(); //填充整个图形

</script>

如下图:

画出弧线

<!--圆形举例,弧线-->
<script type="text/javascript">

var c=document.getElementById("myCanvas");

var context=c.getContext("2d");

for(var i=0;i<15;i++){

context.fillStyle="#FF00FF";
context.beginPath();//开始绘制
context.arc(0,200,i*10,0,Math.PI*3/2,true);
//context.closePath();
context.stroke();

// context.closePath();//封闭起点和终点
// context.fill(); //填充整个图形

}

</script>

如下图:

 

画出填充三角形


<script type="text/javascript">

var c=document.getElementById("myCanvas");

var context=c.getContext("2d");

context.fillStyle="red";

context.beginPath();
context.moveTo(25,25);
context.lineTo(100,25);
context.lineTo(30,150);
//context.closePath();
context.fill();

</script>

如下图:

画出空心三角形


<script type="text/javascript">

var c=document.getElementById("myCanvas");

var context=c.getContext("2d");

context.strokeStyle="green";

context.beginPath();
context.moveTo(25,25);
context.lineTo(100,25);
context.lineTo(30,150);
context.closePath();
context.stroke();
</script>

如下图:

 

清空画布


<script type="text/javascript">

var c=document.getElementById("myCanvas");

var context=c.getContext("2d");

context.strokeStyle="green";

context.beginPath();
context.moveTo(25,25);
context.lineTo(100,25);
context.lineTo(30,150);
context.closePath();
context.stroke();

function clearMap(){
context.clearRect(0,0,100,100); //清空·部分·
//context.clearRect(0,0,400,200);//清空全部
}

</script>
<br />
<input name="clear" type="button" value="清空画布" onclick="clearMap();" />

如下图(没清空之前):

点击清空画布按钮:

画出二次方贝塞尔曲线


<script type="text/javascript">

var c=document.getElementById("myCanvas");

var context=c.getContext("2d");

context.strokeStyle="dark";

context.beginPath();
context.moveTo(0,200);
context.quadraticCurveTo(75,50,300,200);
context.stroke();
context.globalCompositeOperation="source-over";

//为了画出控制线
context.strokeStyle="#ff00ff";
context.beginPath();
context.moveTo(75,50);//控制点
context.lineTo(0,200);//开始点
context.moveTo(75,50);//控制点
context.lineTo(300,200);//结束点

context.stroke();

</script>

如下图:

 

画出三次方贝塞尔曲线


<script type="text/javascript">

var c=document.getElementById("myCanvas");

var context=c.getContext("2d");

context.strokeStyle="dark";

context.beginPath();
context.moveTo(0,200);
context.bezierCurveTo(25,50,75,50,300,200);
context.stroke();
context.globalCompositeOperation="source-over";

//为了画出控制线
context.strokeStyle="#ff00ff";
context.beginPath();
context.moveTo(25,50);//控制点
context.lineTo(0,200);//开始点
context.moveTo(75,50);//控制点
context.lineTo(300,200);//结束点

context.stroke();

</script>

如下图:

 

保存与恢复canvas状态


<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
// 开始绘制矩形。
context.fillStyle="#ff00ff";
context.strokeStyle="blue";
context.fillRect(20,20,100,100);
context.strokeRect(20,20,100,100);
context.fill();
context.stroke();
// 保存当前Canvas状态。
context.save();
//绘制另外一个矩形。
context.fillStyle="#ff0000";
context.strokeStyle="green";
context.fillRect(140,20,100,100);
context.strokeRect(140,20,100,100);
context.fill();
context.stroke();
// 恢复第一个矩形的状态。
context.restore();  //如果把这个注释,会按照第二个图形的方式显示
// 绘制两个矩形。
context.fillRect(20,140,50,50);
context.strokeRect(80,140,50,50);
</script>

如下图:不注释context.restore(); 按照第一个图形的方式显示

 

注释context.restore(); 按照第二个图形的方式显示

 

上面就是对canvas画出各种图形的介绍,之后的文章会有绘制文字和图像等知识,如果你对canvas感兴趣,快和我一起愉快的玩耍吧!!!

 

有任何问题随时与我练习!

转载请注明:zchao博客之家 » HTML5的canvas画布细节学习(带你画出各种图形)

喜欢 (1)

说点什么

Please Login to comment
  Subscribe  
提醒