使用Canvas技术绘制国旗

52czm.cn 发布于 2019-05-27
分类：技术分享
阅读(160)
评论(0)

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技术绘制国旗

标签：H5分享

相关推荐