HTML5培训学习绘制图形

2017-06-27 11:16:00

1.canvas如何使用?
是HTML5新增的一个标签,用来定义图形,比如图表和其他图像。在页面上放置一个标签,就相当于在页面放置了一块“画布”,可以在其中进行图形的绘制。在网页上使用标签时,它会创建一块矩形区域,默认该区域的宽为300像素,高为150像素,也可以自定义它的大小。在页面添加标签后,便可以使用JavaScript来控制它,可以添加图片、线条、以及文字等。注:Internet8或以前版本的浏览器不支持元素。
 
2.如何绘制一个带边框的矩形?
使用标签绘制带边框的矩形,代码如下:








<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.fillStyle = "yellow";
context.fillRect(10,10,150,100);
context.strokeStyle = 'read';
context.strokeRect(10,10,150,100);
</script>


 
代码解析:
 
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
首先通过引用特定的canvas id值来获取对canvas对象的访问权限,这里引用的id为myCanvas,接着定义一个context变量,调用canvas对象的getContext方法,同时传入使用的canvas类型,当前唯一的合法值为“2d”,他指定了一个二维绘图。
用来设置画布的大小、样式。这里设置宽度为200像素,高度为150的区域,设置边框为1像素。
context.fillStyle = "颜色";用来设置矩形的填充颜色,
context.fillRect(x,y,width,height);设置填充矩形的范围,x指矩形起点横坐标,y指起点纵坐标,坐标原点为画布的最左上角。width指矩形长度,height为矩形高度。strokeStyle 用来设置边框的颜色,strokeRect设置边框的范围。
代码运行效果如下:

 

运行代码,得到一个宽200像素,高150像素,边框为1像素的画布,里面绘制一个宽150像素,高100像素,颜色为黄色的矩形。矩形的边框设置为红色。
 
3.如何用canvas标签绘制圆形和弧线?
绘制圆形需要执行以下步骤:
(1)context.beginPath();开始创建路径。
(2)context.arc(x,y,radius,startAngle,endAngle,anticlockwise);创建图像的路径,该方法有6个参数,x,y分别为绘制圆形的起点横坐标和纵坐标,radius为圆形半径,startAngle和endAngle为开始角度和结束角度,以屏幕x轴正方向为基准。在canvas API中,绘制半径与弧度时指定的参数为开始弧度和结束弧度。 anticlockwise设置是否为逆时针方向开始绘图。
(3)context.closePath(); 路径创建完成,关闭路径。
(4)context.fillStyle = "颜色"; context.fill(); 设置绘制样式,调用绘制方法,绘制路径。
实例代码:








<script type="text/javascript">
var canvas = document.getElementById('round');
var context = canvas.getContext('2d');
context.beginPath();
context.arc(100,75,50,0,Math.PI*2,false);
context.closePath();
context.fillStyle = "blue";
context.fill();
</script>



 

Math.PI为圆的一半,运行结果如图所示,圆的圆心坐标为(100,75),半径为50。
绘制圆环或者一段弧线的方法与圆形类似,JavaScript中的代码如下:
var canvas = document.getElementById('round');
var context = canvas.getContext('2d');
context.beginPath();
context.arc(100,75,50,0,Math.PI,false);
context.strokeStyle = "blue";
context.stroke();
效果如图:

 

运行结果为一段圆的二分之一弧,如果想得到一个封闭的弧线,只需要添加
context.closePath(); 属性将路径关闭即可。
 
4.moveTo(x,y)与lineTo(x,y)的用法
moveTo(x,y):不进行绘制,,只是将当前画笔位置移动到新的目标坐标(x,y)。
lineTo(x,y):不仅将当前位置移动到目标位置(x,y),而且在两个坐标之间画出一条直线。可以使用strokeStyle属性修改线的颜色。
下面将使用moveTo和lineTo绘制一颗圣诞树,代码如下:








<script type="text/javascript">
var canvas = document.getElementById('tree');
var context = canvas.getContext('2d');
// 绘制第一个三角形
context.beginPath();
context.moveTo(50,0);
context.lineTo(25,50);
context.lineTo(75,50);
context.lineTo(50,0);
context.fillStyle = 'gold';
context.fill();
// 绘制第二个三角形
context.beginPath();
context.moveTo(50,50);
context.lineTo(0,100);
context.lineTo(100,100);
context.lineTo(50,50);
context.fillStyle = "goldenrod";
context.fill();
// 绘制矩形
context.fillStyle = 'darkgoldenrod';
context.fillRect(42,100,16,100);
</script>


这里分三步画出这颗圣诞树,开始画笔,先画出最上方的三角形,结束画笔后再进行第二个三角形的绘制。最后画出下方的矩形。效果如图:

 

iOS QQ群

HTML5 QQ群

飞雀动态

行业新闻

Copyright © 2015-2016 Future education technology co., LTD All Rights Reserved