【Canvas与六边形】三条鱼钩拼成的黑底金边六边形

【成图】

1

2

3

4

5

【代码】

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>三条鱼钩拼成的六边形 Draft1</title>
     <style type="text/css">
     .centerlize{
        margin:0 auto;
        width:1200px;
     }
     </style>
     </head>

     <body onload="init();">
        <div class="centerlize">
            <canvas id="myCanvas" width="12px" height="12px" 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){
        //sleep(100);
        window.requestAnimationFrame(animate);   
    }
}

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

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

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

    // 画前景
    this.paintFg=function(ctx){
        // 底色
        ctx.save();
        ctx.fillStyle = "rgb(19,11,35)";
        ctx.fillRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);
        ctx.restore();
        
        const R=220;//基准尺寸
        var ct=createPt(0,0);// ct=center

        // #1 
        ctx.save();    
        var r=R*1.00;

        for(var i=0;i<3;i++){
            var theta=Math.PI/3*2*i+Math.PI/6;
            var a=createPt2(ct.x,ct.y,r,theta);
            var b=createPt2(a.x,a.y,r*1,theta+Math.PI/3*2);
            var c=createPt2(b.x,b.y,r/3*1,theta+Math.PI);
            var d=createPt2(c.x,c.y,r*1,theta-Math.PI/3);
            var e=createPt2(d.x,d.y,r/3,theta-Math.PI/3*2);
            var f=createPt2(e.x,e.y,r/3*2,theta+Math.PI);
            var h=createPt2(f.x,f.y,r/3,theta+Math.PI/3);
            var ii=createPt2(h.x,h.y,r/3,theta+Math.PI/3*2);
            var j=createPt2(ii.x,ii.y,r/3*2,theta-Math.PI/3*2);
            var k=createPt2(j.x,j.y,r/3*1,theta-Math.PI/3*1);
            var l=createPt2(k.x,k.y,r,theta);

            ctx.lineWidth=R/220*12;
            ctx.strokeStyle="rgb(240,239,209)";
            ctx.beginPath();
            ctx.moveTo(a.x,a.y);
            ctx.lineTo(b.x,b.y);
            ctx.lineTo(c.x,c.y);
            ctx.lineTo(d.x,d.y);
            ctx.lineTo(e.x,e.y);
            ctx.lineTo(f.x,f.y);
            ctx.lineTo(h.x,h.y);
            ctx.lineTo(ii.x,ii.y);
            ctx.lineTo(j.x,j.y);
            ctx.lineTo(k.x,k.y);
            ctx.lineTo(l.x,l.y);
            ctx.closePath();
            ctx.stroke();
        }        
        ctx.restore();
                    
        writeText(ctx,WIDTH/2-30,HEIGHT/2-5,"逆火制图","8px consolas","lightgrey");// 版权
    }
}

/*----------------------------------------------------------
基本函数:用于绘制实心圆
ctx:绘图上下文
x:矩形中心横坐标
y:矩形中心纵坐标
r:圆半径
style:填充圆的方案
----------------------------------------------------------*/
function drawSolidCircle(ctx,x,y,r,style){
    ctx.fillStyle=style;
    ctx.beginPath();
    ctx.arc(x,y,r,0,Math.PI*2,false);
    ctx.closePath();
    ctx.fill();
}

/*----------------------------------------------------------
基本函数:用于绘制矩形
ctx:绘图上下文
x:矩形中心横坐标
y:矩形中心纵坐标
width:矩形宽
height:矩形高
----------------------------------------------------------*/
function drawRect(ctx,x,y,width,height){
    ctx.beginPath();
    ctx.moveTo(x-width/2,y-height/2);
    ctx.lineTo(x+width/2,y-height/2);
    ctx.lineTo(x+width/2,y+height/2);
    ctx.lineTo(x-width/2,y+height/2);
    ctx.closePath();
}

/*----------------------------------------------------------
基本函数:创建一个二维坐标点
baseX:基准点横坐标
baseY:基准点纵坐标
radius:当前点到基准点的距离
theta:当前点到基准点的角度
Pt即Point
----------------------------------------------------------*/
function createPt2(baseX,baseY,radius,theta){
    var retval={};
    retval.x=baseX+radius*Math.cos(theta);
    retval.y=baseY+radius*Math.sin(theta);
    return retval;
}

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

/*----------------------------------------------------------
基本函数:延时若干毫秒
milliseconds:毫秒数
----------------------------------------------------------*/
function sleep(milliSeconds) {
    const date = Date.now();
    let currDate = null;
    while (currDate - date < milliSeconds) {
        currDate = Date.now();
    } 
}

/*----------------------------------------------------------
基本函数:书写文字
ctx:绘图上下文
x:横坐标
y:纵坐标
text:文字
font:字体
color:颜色
----------------------------------------------------------*/
function writeText(ctx,x,y,text,font,color){
    ctx.save();
    ctx.textBaseline="bottom";
    ctx.textAlign="center";
    ctx.font = font;
    ctx.fillStyle=color;
    ctx.fillText(text,x,y);
    ctx.restore();
}

/*-------------------------------------------------------------
《我曾七次鄙视自己的灵魂》，
纪伯以“自己的灵魂”为名，
看穿人性所共有弱点的一首诗。
诗句简单有力发人深省，
督促人们拥有更高的精神境界，
呼吁人们涤荡自己的灵魂，唾弃丑恶，追求高尚。

Seven times have I despised my soul
我曾经七次鄙视自己的灵魂

The first time when I saw her being meek that she might attain height.
第一次，是当我看到她本可进取，却故作谦卑时。

The second time when I saw her limping before the crippled.
第二次，是当我看到她在瘸子面前跛行而过时。

The third time when she was given to choose between the hard and the easy, and she chose the easy.
第三次，是当她在难易之间，却选择了容易时。

The fourth time when she committed a wrong, and comforted herself that others also commit wrong.
第四次，是当她犯了错，却借由别人也会犯错来宽慰自己时。

The fifth time when she forbore for weakness, and attributed her patience to strength.
第五次，是当她因为软弱而忍让，却声称为自己的坚韧时。

The sixth time when she despised the ugliness of a face, and knew not that it was one of her own masks.
第六次，是当她鄙夷一张丑恶的嘴脸，却不知那正是自己面具中的一副时。

And the seventh time when she sang a song of praise, and deemed it a virtue.
第七次，是当她吟唱圣歌，却自诩为一种美德时。
--------------------------------------------------------------*/
//-->
</script>

END

posted @ 2017-02-17 18:59  逆火狂飙  阅读(1901)  评论(0)    收藏  举报
生当作人杰 死亦为鬼雄 至今思项羽 不肯过江东