使用Canvas技术绘制国旗

Canvas基础知识准备

简单介绍:HTML5中的 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript)。不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 所以您必须使用脚本来完成实际的绘图任务。

使用getContext() 方法可返回一个对象,该对象提供了用于在画布上
绘制文本、线条、矩形、圆形等等的方法和属性。

1.获取canvas对象:var canvas = document.querySelector("#mycanvas");

2.创建canvas画布:var hj = canvas.getContext("2d");

3.绘制开始:hj.beginPath();

4.线的起始坐标:hj.moveTo(170,40);

5.线的移动坐标:hj.lineTo(230,40);

6. 绘制调用:hj.stroke();

7. 绘制结束:hj.closePath();

8. 绘制矩形:hj.rect(x,y,width,height);

9.填充颜色:hj.fillStyle = "red"; hj.fill();

10.线的颜色:hj.strokeStyle = "yellow";

11.线的大小: hj.lineWidth=5;

注:每一次绘制都要以hj.stroke();结束,不调用绘制不了。(hj代表之前创建的画布对象) ;红色字体部分为必须步骤。

Canvas效果展示图

Canvas代码部分

在<body><body> 中间加入canvas画布代码即可。

<canvas id="mycanvas" height="400" width="600">

JS代码

<script>var canvas = document.querySelector("#mycanvas");
var hj = canvas.getContext("2d");
/*----矩形绘制-----*/
hj.beginPath();
hj.rect(10,10,650,350);
hj.fillStyle = "red";
hj.fill();
hj.strokeStyle="red";
hj.stroke();
hj.closePath();
/*--大五角星绘制----*/
hj.beginPath();
hj.moveTo(30,110);
hj.lineTo(170,110);
hj.lineTo(50,210);
hj.lineTo(100,70);
hj.lineTo(150,210);
hj.lineTo(30,110);
hj.fillStyle = "yellow";
hj.fill();
hj.strokeStyle = "yellow";
hj.stroke();
hj.closePath();
/*--从上往下小五角星1绘制----*/
hj.beginPath();
hj.moveTo(170,40);
hj.lineTo(230,40);
hj.lineTo(180,80);
hj.lineTo(200,20);
hj.lineTo(220,80);
hj.lineTo(170,40);
hj.fillStyle = "yellow";
hj.strokeStyle = "yellow";
hj.fill();
hj.stroke();
/*--从上往下小五角星2绘制----*/
hj.closePath();
hj.beginPath();
hj.moveTo(200,105);
hj.lineTo(260,105);
hj.lineTo(210,145);
hj.lineTo(230,85);
hj.lineTo(250,145);
hj.lineTo(200,105);
hj.fillStyle = "yellow";
hj.strokeStyle = "yellow";
hj.fill();
hj.stroke();
hj.closePath();
/*--从上往下小五角星3绘制---*/
hj.closePath();
hj.beginPath();
hj.moveTo(190,175);
hj.lineTo(250,175);
hj.lineTo(200,215);
hj.lineTo(220,155);
hj.lineTo(240,215);
hj.lineTo(190,175);
hj.fillStyle = "yellow";
hj.strokeStyle = "yellow";
hj.fill();
hj.stroke();
hj.closePath();
/*--从上往下小五角星4绘制--*/
hj.closePath();
hj.beginPath();
hj.moveTo(160,240);
hj.lineTo(220,240);
hj.lineTo(170,280);
hj.lineTo(190,220);
hj.lineTo(210,280);
hj.lineTo(160,240);
hj.fillStyle = "yellow";
hj.strokeStyle = "yellow";
hj.fill();
hj.stroke();
hj.closePath();
</script>

复制对应的代码本地测试或则直接请点击下方文件。

Canvas国旗绘制:点击下载提取码:f2qs

未经允许不得转载:创之梦博客 » 使用Canvas技术绘制国旗

赞 (1)
分享到:更多 ()