【Canvas与艺术】绘制“Best Product Guaranteed”标志

原创

科技之巅 2024-04-03 23:56:23 博主文章分类：代码艺术 ©著作权

©著作权归作者所有：来自51CTO博客作者科技之巅的原创作品，请联系作者获取转载授权，否则将追究法律责任

【图示】

【Canvas与艺术】绘制“Best Product Guaranteed”标志_Canvas best product

【代码】

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>用Canvas绘制“Best Product Guaranteed”标志</title>
     <style type="text/css">
     .centerlize{
        margin:0 auto;
        width:1200px;
     }
     </style>
	 </head>

     <body onload="init();">
        <div class="centerlize">
            <canvas id="myCanvas" width="512px" height="512px" style="border:1px dotted black;">
                如果看到这段文字说您的浏览器尚不支持HTML5 Canvas，请更换浏览器再试.
            </canvas>
        </div>
     </body>
</html>
<script type="text/javascript">
<!--
/*****************************************************************
* 将全体代码(从<!DOCTYPE到script>)拷贝下来，粘贴到文本编辑器中，
* 另存为.html文件，再用chrome浏览器打开，就能看到实现效果。
******************************************************************/

// canvas的绘图环境
var ctx;

// 高宽
const WIDTH=512;
const HEIGHT=512;

// 舞台对象
var stage;

//-------------------------------
// 初始化
//-------------------------------
function init(){
	// 获得canvas对象
	var canvas=document.getElementById('myCanvas');  
	canvas.width=WIDTH;
	canvas.height=HEIGHT;

	// 初始化canvas的绘图环境
	ctx=canvas.getContext('2d');  
	ctx.translate(WIDTH/2,HEIGHT/2);// 原点平移到画布中央

	// 准备
	stage=new Stage();	
	stage.init();

	// 开幕
    animate();
}

// 播放动画
function animate(){    
    stage.update();	
	stage.paintBg(ctx);
	stage.paintFg(ctx);	 

	// 循环
    if(true){
		window.requestAnimationFrame(animate);   
    }
}

// 舞台类
function Stage(){
	// 初始化
	this.init=function(){
		
	}

	// 更新
	this.update=function(){
		
	}

	// 画背景
	this.paintBg=function(ctx){
		ctx.clearRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);// 清屏		

		// 斜齿齿轮轮廓
		var gearArr=getGearArray(96,Math.PI/96,250,240);				
		ctx.beginPath();
		for(var i=0;i<gearArr.length;i++){
			ctx.lineTo(gearArr[i].x,gearArr[i].y);
		}
		ctx.closePath();
		ctx.fillStyle="rgb(149,30,36)";
		ctx.fill();

		/*var whiteRadius=230;
		for(var i=0;i<360;i++){
			var start=i*Math.PI*2/360*3;
			var startPt=createPt(whiteRadius*Math.cos(start),whiteRadius*Math.sin(start));
			var end=start+Math.PI*2/360*2;
			var endPt=createPt(whiteRadius*Math.cos(end),whiteRadius*Math.sin(end));

			ctx.beginPath();
			ctx.moveTo(startPt.x,startPt.y);
			ctx.lineTo(endPt.x,endPt.y);
			ctx.closePath();
			ctx.lineWidth=0.5;
			ctx.strokeStyle="yellow";
			ctx.stroke();
		}*/

		// 下半圆		
		const outerRadius=210;
		const innerRadius=150;
		var theta=Math.PI/10;
		var x1=outerRadius*Math.cos(theta);
		var y1=outerRadius*Math.sin(theta);
		var beta=Math.asin(y1/innerRadius);
		var x2=Math.sqrt(innerRadius*innerRadius-y1*y1);

		ctx.beginPath();
		ctx.moveTo(x1,y1);		
		ctx.arc(0,0,outerRadius,theta,Math.PI-theta,false);	
		ctx.lineTo(-x2,y1);
		ctx.arc(0,0,innerRadius,Math.PI-beta,beta,true);	
		ctx.lineTo(x2,y1);
		ctx.lineTo(x1,y1);
		ctx.closePath();

		ctx.lineWidth=15;
		ctx.strokeStyle="rgb(245,247,225)";
		ctx.stroke();
		ctx.fillStyle="rgb(29,159,149)";
		ctx.fill();

		var txts=["G","U","A","R","A","N","T","E","E","D"];
		for(var i=0;i<txts.length;i++){
			var letter=txts[i];

			var gama=Math.PI/180*132-i*Math.PI/19;
			var x=190*Math.cos(gama);
			var y=190*Math.sin(gama);
			
			ctx.save();
			ctx.translate(x,y);
			ctx.rotate(gama-Math.PI/2);
			ctx.scale(1,0.5);
			ctx.textBaseline="bottom";
			ctx.textAlign="center";
			ctx.font = "48px Bahnschrift SemiBold";
			ctx.fillStyle="white";
			ctx.fillText(letter,0,0);
			ctx.restore();
		}

		// 上半圆
		ctx.beginPath();
		ctx.moveTo(x1,-y1);		
		ctx.arc(0,0,outerRadius,-theta,Math.PI+theta,true);	
		ctx.lineTo(-x2,-y1);
		ctx.arc(0,0,innerRadius,Math.PI+beta,-beta,false);	
		ctx.lineTo(x2,-y1);
		ctx.lineTo(x1,-y1);
		ctx.closePath();
		ctx.lineWidth=15;
		ctx.strokeStyle="rgb(245,247,225)";
		ctx.stroke();
		ctx.fillStyle="rgb(29,159,149)";
		ctx.fill();

		txts=["B","E","S","T"," ","P","R","O","D","U","C","T"];
		for(var i=0;i<txts.length;i++){
			var letter=txts[i];

			var gama=Math.PI/180*218+i*Math.PI/19;
			var x=167*Math.cos(gama);
			var y=167*Math.sin(gama);
			
			ctx.save();
			ctx.translate(x,y);
			ctx.rotate(gama+Math.PI/2);
			ctx.scale(1,0.5);
			ctx.textBaseline="bottom";
			ctx.textAlign="center";
			ctx.font = "48px Bahnschrift SemiBold";
			ctx.fillStyle="white";
			ctx.fillText(letter,0,0);
			ctx.restore();
		}

		// 画中间右半边五角星
		const R=120;// 五角星外角半径
		const r=60;// 五角星内角半径

		// 左半边
		ctx.save();
		ctx.shadowColor = 'black';
		ctx.shadowOffsetX = 5;
		ctx.shadowOffsetY = 5;
		ctx.shadowBlur = 2;

		ctx.rotate(-Math.PI/10);
		ctx.beginPath();
		var alpha=0*2*Math.PI/5-3*Math.PI/5;
		ctx.moveTo(0,0);
		var x1=-R*Math.cos(alpha);
		var y1=R*Math.sin(alpha);
		ctx.moveTo(x1,y1);
		var beta=0*2*Math.PI/5-2*Math.PI/5;
		var x2=-r*Math.cos(beta);
		var y2=r*Math.sin(beta);
		ctx.lineTo(x2,y2);
		alpha=1*2*Math.PI/5-3*Math.PI/5;
		var x1=-R*Math.cos(alpha);
		var y1=R*Math.sin(alpha);
		ctx.lineTo(x1,y1);
		beta=1*2*Math.PI/5-2*Math.PI/5;
		var x2=-r*Math.cos(beta);
		var y2=r*Math.sin(beta);
		ctx.lineTo(x2,y2);
		alpha=2*2*Math.PI/5-3*Math.PI/5;
		var x1=-R*Math.cos(alpha);
		var y1=R*Math.sin(alpha);
		ctx.lineTo(x1,y1);
		beta=2*2*Math.PI/5-2*Math.PI/5;
		var x2=-r*Math.cos(beta);
		var y2=r*Math.sin(beta);
		ctx.lineTo(x2,y2);
		ctx.closePath();
		ctx.fillStyle="rgb(239,228,61)";
		ctx.fill();
		ctx.restore();

		// 右半边
		ctx.save();
		ctx.shadowColor = 'black';
		ctx.shadowOffsetX = 5;
		ctx.shadowOffsetY = 5;
		ctx.shadowBlur = 2;

		ctx.rotate(Math.PI/10);
		ctx.beginPath();
		var alpha=0*2*Math.PI/5-3*Math.PI/5;
		ctx.moveTo(0,0);
		var x1=R*Math.cos(alpha);
		var y1=R*Math.sin(alpha);
		ctx.moveTo(x1,y1);
		var beta=0*2*Math.PI/5-2*Math.PI/5;
		var x2=r*Math.cos(beta);
		var y2=r*Math.sin(beta);
		ctx.lineTo(x2,y2);
		alpha=1*2*Math.PI/5-3*Math.PI/5;
		var x1=R*Math.cos(alpha);
		var y1=R*Math.sin(alpha);
		ctx.lineTo(x1,y1);
		beta=1*2*Math.PI/5-2*Math.PI/5;
		var x2=r*Math.cos(beta);
		var y2=r*Math.sin(beta);
		ctx.lineTo(x2,y2);
		alpha=2*2*Math.PI/5-3*Math.PI/5;
		var x1=R*Math.cos(alpha);
		var y1=R*Math.sin(alpha);
		ctx.lineTo(x1,y1);
		beta=2*2*Math.PI/5-2*Math.PI/5;
		var x2=r*Math.cos(beta);
		var y2=r*Math.sin(beta);
		ctx.lineTo(x2,y2);
		ctx.closePath();
		ctx.fillStyle="rgb(189,180,39)";
		ctx.fill();
		ctx.restore();

		// 左右五星
		draw5Star(ctx,-170,0,20);
		ctx.fillStyle="yellow";
		ctx.fill();
		draw5Star(ctx,170,0,20);
		ctx.fillStyle="yellow";
		ctx.fill();		
	}

	// 画前景
	this.paintFg=function(ctx){
		
	}
}

//-------------------------------------------------------
// 取得一个齿轮全部控制点的函数
// n:齿轮齿数
// angle:齿斜面倾角
// outerRadius:齿轮外径
// innerRadius:齿轮内径
//-------------------------------------------------------
function getGearArray(n,angle,outerRadius,innerRadius){
	// 准备齿轮数组
	var gearArr=new Array();

	for(var i=0;i<n*2;i++){
		var alpha=Math.PI/n*i;
		var bata=alpha+angle;
		var x1,y1,x2,y2;
		
		if(i%2==1){
			x1=innerRadius*Math.cos(alpha);
			y1=innerRadius*Math.sin(alpha);

			x2=outerRadius*Math.cos(bata);
			y2=outerRadius*Math.sin(bata);				
		}else{				
			x1=outerRadius*Math.cos(alpha);
			y1=outerRadius*Math.sin(alpha);

			x2=innerRadius*Math.cos(bata);
			y2=innerRadius*Math.sin(bata);
		}

		gearArr.push({x:x1,y:y1});
		gearArr.push({x:x2,y:y2});
	}

	return gearArr;
}

/*----------------------------------------------------------
函数:创建一个二维坐标点
x:横坐标
y:纵坐标
Pt即Point
----------------------------------------------------------*/
function createPt(x,y){
	var retval={};
	retval.x=x;
	retval.y=y;
	return retval;
}

/*--------------------------------------------------
函数:绘制正五角星的推荐画法
ctx:绘图上下文
x:五角星中心横坐标
y:五角星中心纵坐标
R:五角星中心到顶点的距离
---------------------------------------------------*/
function draw5Star(ctx,x,y,R){
	var r=R*Math.sin(Math.PI/10)/Math.sin(Math.PI/10*7);
	
	var arr=[0,0,0,0,0,0,0,0,0,0];

	// 顶五点
	for(var i=0;i<5;i++){
		var theta=i*Math.PI/5*2-Math.PI/10;
		var x1=R*Math.cos(theta)+x;
		var y1=R*Math.sin(theta)+y;
		arr[i*2]=createPt(x1,y1);
	}

	// 内五点
	for(var i=0;i<5;i++){
		var theta=i*Math.PI/5*2+Math.PI/10;
		var x1=r*Math.cos(theta)+x;
		var y1=r*Math.sin(theta)+y;
		arr[i*2+1]=createPt(x1,y1);
	}

	ctx.beginPath();
	for(var i=0;i<arr.length;i++){
		ctx.lineTo(arr[i].x,arr[i].y);
	}
	ctx.closePath();
}

/*---------------------------------------------
可以改变命运的八个途径：

1.比大多数人勤奋认真;
2.做好每一件小事;
3.微笑面对任何命运的不公;
4.时间比金钱重要;
5.养成好习惯，习惯决定命运;
6.不断与人性的弱点斗争;
7.天才都是有心人;
8.机会无大小，只有时间早晚。
----------------------------------------------*/
//-->
</script>