canvas绘制国旗样式

今天绘制的是国旗:

代码如下:

<html>
<head>
<script>
var col=new Array("red","brown");
var ticker=0;
var step=0;
function drawBackground(){
var g=document.getElementById("background").getContext("2d");
var grd=g.createLinearGradient(-560+ticker, 0, 1400+ticker,0);
for (var i=0; i<10; i++)
grd.addColorStop(i/10,col[(i + step)%col.length]);
ticker=ticker+10;
if (ticker>=196){
ticker=0;
step++;
}
g.fillStyle=grd;
g.fillRect(0,0,1000,500); //红旗的整体大小
}

function preperation(){
setInterval(‘drawBackground()‘,100);
}
</script>
<style type="text/css">
#myCanvas{
z-index:2;
position:absolute; left:0px; top:-5px;
}
#background{
z-index:1;
position:absolute;
left:0px;
top:0px;
}
</style>
</head>
<body onLoad="preperation()">
<canvas id="myCanvas" width="900" height="600" >
Your browser does not support the HTML5 canvas tag.
</canvas>
<canvas id="background" width="1600" height="700" ></canvas>
<script>
var x=new Array(0,12,54,18,28,0,-28,-18,-54,-12,0); //五角星样品坐标xx数组
var y=new Array(-53,-17,-17,1,45,19,45,1,-17,-17,-53); //五角星样品坐标y数组

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d"); //获得画笔
//样品数组x轴坐标 a , 和y轴坐标 b
//指定位置[locationX,locationY]
//真实五角星的大小,与样品五角星尺寸之比 f
//五角星画完后,旋转的角度 rotation
function star(a,b,locationX,locationY,f,rotation){
ctx.save();//记录画图(画笔)的初始环境
ctx.translate(locationX,locationY);
ctx.rotate(rotation*Math.PI/180.0);
ctx.beginPath();
ctx.moveTo(Math.round(a[0]*f),Math.round(b[0]*f));
for (var i=1;i<a.length;i++)
ctx.lineTo(Math.round(a[i]*f),Math.round(b[i]*f));
ctx.closePath();
ctx.fillStyle="yellow";
ctx.fill();
ctx.restore();//还原画图(画笔)的初始环境
}
star(x,y,165,165,1.4,0);//画大五角星
star(x,y,301,65,0.5,30);//画小五角星
star(x,y,362,126,0.5,-30);//画小五角星
star(x,y,359,216,0.5,0);//画小五角星
star(x,y,301,273,0.5,30);//画小五角星
</script>
</body>
</html>

这是我暑假的最后两篇博客记录,明天就是最后一次连续记录,明天将用canvas绘制一个炫酷的图形样式!!

时间: 2024-10-19 16:40:58

canvas绘制国旗样式的相关文章

(三)canvas绘制样式

beginPath() 对画线点的一个开始限制 moveTo() 画线的起点,只在开头使用 参数两个x轴,y轴 lineTo() 后续连线 两个参数x轴,y轴 stroke() 连线无填充 fill() 填充,默认黑色 closePath() 对画线点的一个结束限制 自动起着连接起点的作用 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> &l

用canvas绘制折线图

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>用canvas绘制折线图</title> 6 </head> 7 <body> 8 <canvas id="cv"></canvas> 9 </body> 1

使用Canvas绘制图形的基本教程

原文地址:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以也要好好学习一把. 好好看了一下Canvas的功能,感觉HTML5在客户端交互的功能性越来越强了,今天看了一下Canvas绘图,下边是几个实例,记下以备后用. 1.使用Canvas绘制直线: <!doctype html> <html> <head> <meta ch

canvas绘制清晰的方法

很早就开始使用canvas,包括自己绘制各种图形,以及作为画布提供给诸如echarts,当canvas绘制细线条,特别是关于文字绘制会出现很模糊或者锯齿的感觉. 1 <canvas ref="canvas" width="200" height="200"/> 正常情况下一般都是这么写的,但是实际上对于canvas来说,这个canvas.width canvas.height 与canvas.style.width canvas.st

HTML5—canvas绘制图形(1)

1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“画布”,我们可以利用js脚本在“画布”上绘制图形. 1.1canvas元素 在利用canvas绘制图形之前,我们首先需要在页面中放置一个canvas元素,如下代码: <canvas id="mycanvas" width="400" height="40

HTML5之Canvas绘图——使用Canvas绘制图形的基本教程

原文转自:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以也要好好学习一把. 好好看了一下Canvas的功能,感觉HTML5在客户端交互的功能性越来越强了,今天看了一下Canvas绘图,下边是几个实例,记下以备后用. 1.使用Canvas绘制直线: 1 <!doctype html> 2 <html> 3 <head> 4 <

H5 canvas绘制出现模糊的问题

在之前做移动端小游戏幸运转盘.九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现. 近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的怎么会模糊,先前也有考虑到适配不同尺寸的移动设备,担心直接使用 img 或者设置 background 会使图片拉伸而变得模糊,所以使用 canvas 来绘制转盘与九宫格,精确的计算每个物体所在的坐标以及尺寸绘制出来的,怎么会模糊. 然而将绘制的内容与页面中的其他文字或者图片作对比后,发现使用 ca

HTML5 Canvas 学习笔记(canvas绘制线条、矩形、多边形、圆形、圆环、组合图形、文字、自定义图像)

学习资源:http://www.w3school.com.cn/html5/html_5_canvas.asp   http://blog.csdn.net/clh604/article/details/8536059   http://www.jb51.net/html5/70307.html 一.对 canvas 的理解 <canvas>标签是 HTML5 中的新标签,像所有的 dom 对象一样它有自己本身的属性.方法和事件. canvas 是用来在网页上绘制图形的(我们通常称之为画布),

HTML5 Canvas绘制实时时钟

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>try to draw the colock</title> <script src="js/modernizr-1.7.js"></script> <script type="text/javascript"> wind