【Canvas与诗词】北岛诗《献给遇罗克》节选(以太阳的名义...)

普兰店拉马努金
于 2024-08-21 20:59:11 发布
阅读量570
点赞数 7
分类专栏：诗词文章标签： canvas 诗歌
本文链接：https://blog.csdn.net/River_Sun/article/details/141402825
版权
诗词专栏收录该内容
4 篇文章 0 订阅
订阅专栏
【成图】

【代码】

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>以太阳的名义</title>
     <style type="text/css">
     .centerlize{
        margin:0 auto;
        width:1200px;
     }
     </style>
     </head>

     <body οnlοad="init();">
        <div class="centerlize">
            <canvas id="myCanvas" width="12px" height="12px" style="border:1px dotted black;">
                如果看到这段文字说您的浏览器尚不支持HTML5 Canvas，请更换浏览器再试.
            </canvas>
            <img id="myImg" src="330.jpg" style="display:none;"/>
        </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.fillStyle = "white";
        ctx.fillRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);

        var r=202;
        ctx.lineWidth=2;
        var gnt1=ctx.createLinearGradient(-r,-r,r,r);
        gnt1.addColorStop(0,"rgb(255,225,83)");
        gnt1.addColorStop(1,"rgb(234,193,0)");
        ctx.strokeStyle=gnt1;
        ctx.beginPath();
        ctx.arc(0,0,r-1,0,Math.PI*2,false);
        ctx.closePath();
        ctx.stroke();
        
        // 切图圈
        ctx.save();
        ctx.rotate(-Math.PI/4*3);
        ctx.beginPath();
        var r=200;
        ctx.arc(0,0,r,0,Math.PI*2,false);
        ctx.closePath();
        ctx.clip();
        var img=document.getElementById("myImg");        
        ctx.drawImage(img,0,0,150,150,-r,-r,2*r,2*r);
        ctx.restore();

        // 锯齿纹
        var N=20;
        var gearArr=getGearArray(N,Math.PI/N,180,160);                
        ctx.beginPath();
        for(var i=0;i<gearArr.length;i++){
            ctx.lineTo(gearArr[i].x,gearArr[i].y);
        }
        ctx.closePath();
        ctx.lineWidth=6;
        ctx.strokeStyle=gnt1;
        ctx.stroke();
        ctx.fillStyle="black";
        ctx.fill();

        // 射线
        var r=178;
        var gnt2=ctx.createRadialGradient(0,0,0,0,0,r);
        gnt2.addColorStop(0,"black");
        gnt2.addColorStop(0.7,"rgb(121,100,0)");
        gnt2.addColorStop(1,"black");
        for(var i=0;i<N;i++){
            var theta=Math.PI*2/N*i;            
            var pt=createPt(r*Math.cos(theta),r*Math.sin(theta));

            var angle=theta-Math.PI/2;
            var rad=2;
            var up=createPt(pt.x+rad*Math.cos(angle),pt.y+rad*Math.sin(angle));

            angle=theta+Math.PI/2;
            var down=createPt(pt.x+rad*Math.cos(angle),pt.y+rad*Math.sin(angle));

            ctx.fillStyle=gnt2;
            ctx.beginPath();
            ctx.moveTo(0,0);
            ctx.lineTo(up.x,up.y);
            ctx.lineTo(down.x,down.y);
            ctx.closePath();
            ctx.fill();
        }

        var color="gold";//"rgb(55,65,77)";
        writeText(ctx,0,-115,"《献给遇罗克》","24px 方正宋刻本秀楷简体",color);
        writeText(ctx,93,-115,"节选","12px 方正宋刻本秀楷简体",color);
        writeText(ctx,50,-95,"北岛","12px 方正宋刻本秀楷简体",color);

        // 五星分隔线
        var left=-75;
        var right=75;
        var height=-90;
        ctx.beginPath();
        ctx.moveTo(left,height);
        ctx.lineTo(-18,height);
        ctx.closePath();
        ctx.lineWidth=1;
        ctx.strokeStyle="gold";
        ctx.stroke();        
        drawSolidFiveStar(ctx,0,height,4,"rgb(245,175,54)","rgb(247,220,55)");
        ctx.beginPath();
        ctx.moveTo(right,height);
        ctx.lineTo(18,height);
        ctx.closePath();
        ctx.lineWidth=1;
        ctx.strokeStyle="gold";
        ctx.stroke();

        // 诗歌正文
        var start=createPt(0,-50);
        var gap=35;
        writeText(ctx,start.x,start.y,"以太阳的名义","26px 方正宋刻本秀楷简体",color);
        writeText(ctx,start.x,start.y+gap,"黑暗公开地掠夺","26px 方正宋刻本秀楷简体",color);
        writeText(ctx,start.x,start.y+2*gap, "沉默依然是东方的故事","26px 方正宋刻本秀楷简体",color);
        writeText(ctx,start.x,start.y+3*gap,"人民在古老的壁画上","26px 方正宋刻本秀楷简体",color);
        writeText(ctx,start.x,start.y+4*gap,"默默地永生","26px 方正宋刻本秀楷简体",color);
        writeText(ctx,start.x,start.y+5*gap,"默默地死去","26px 方正宋刻本秀楷简体",color);

        // 五星结束线
        var left=-60;
        var right=60;
        var height=140;
        ctx.beginPath();
        ctx.moveTo(left,height);
        ctx.lineTo(-18,height);
        ctx.closePath();
        ctx.lineWidth=1;
        ctx.strokeStyle="gold";
        ctx.stroke();        
        drawSolidFiveStar(ctx,0,height,4,"rgb(245,175,54)","rgb(247,220,55)");
        ctx.beginPath();
        ctx.moveTo(right,height);
        ctx.lineTo(18,height);
        ctx.closePath();
        ctx.lineWidth=1;
        ctx.strokeStyle="gold";
        ctx.stroke();

        // 太阳光芒
        var r=210;
        var R=250;
        var gnt3=ctx.createRadialGradient(0,0,r,0,0,R);
        gnt3.addColorStop(0,"white");
        gnt3.addColorStop(0.7,"rgb(225,225,0)");
        gnt3.addColorStop(1,"rgb(255,255,170)");
    
        for(var i=0;i<N;i++){
            var theta=Math.PI*2/N*i;            
            var pt=createPt(r*Math.cos(theta),r*Math.sin(theta));

            var angle=theta-Math.PI/2;
            var rad=5;
            var up=createPt(pt.x+rad*Math.cos(angle),pt.y+rad*Math.sin(angle));

            angle=theta+Math.PI/2;
            var down=createPt(pt.x+rad*Math.cos(angle),pt.y+rad*Math.sin(angle));

            var top=createPt(R*Math.cos(theta),R*Math.sin(theta));

            ctx.fillStyle=gnt3;
            ctx.beginPath();
            ctx.lineTo(up.x,up.y);
            ctx.lineTo(down.x,down.y);
            ctx.lineTo(top.x,top.y);
            ctx.closePath();
            ctx.fill();
        }

        writeText(ctx,WIDTH/2-30,HEIGHT/2-5,"逆火原创","8px consolas","lightgrey");// 版权
    }
}

//-------------------------------------------------------
// 取得一个齿轮全部控制点的函数
// 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;
}

//-------------------------------------------------------
// 绘制实体五角星
// ctx:绘图上下文
// x,y:五星中间点坐标
// radius:五星半径
// color1:阳面颜色
// color2:阴面颜色
//-------------------------------------------------------
function drawSolidFiveStar(ctx,x,y,radius,color1,color2){
    ctx.save();
    ctx.translate(x,y);
    var N=5;// 角个数
    var R=radius;// 内径
    for(var i=0;i<N;i++){
        var theta=Math.PI*2/N*i-Math.PI/10*3;
        var a=createPt(R*Math.cos(theta),R*Math.sin(theta));
        
        var r=R*Math.sin(Math.PI/10*2)/Math.sin(Math.PI/10);
        var angle=theta+Math.PI/10*3;
        var b=createPt(a.x+r*Math.cos(angle),a.y+r*Math.sin(angle));
                
        // 填充上三角形
        ctx.fillStyle=color1;
        ctx.beginPath();
        ctx.moveTo(a.x,a.y);
        ctx.lineTo(b.x,b.y);
        ctx.lineTo(0,0);
        ctx.closePath();
        ctx.fill();

        angle=theta+Math.PI/10*4;
        var c=createPt(R*Math.cos(angle),R*Math.sin(angle));

        // 填充下三角形
        ctx.fillStyle=color2;
        ctx.beginPath();
        ctx.moveTo(0,0);            
        ctx.lineTo(b.x,b.y);
        ctx.lineTo(c.x,c.y);
        ctx.closePath();
        ctx.fill();
    }
    ctx.restore();
}

/*----------------------------------------------------------
函数:创建一个二维坐标点
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();
}

/*-------------------------------------------------------------
《结局或开始——献给遇罗克》 
                      作者：北岛

我，站在这里
代替另一个被杀害的人
为了每当太阳升起
让沉重的影子象道路
穿过整个国土
悲哀的雾
覆盖着补丁般错落的屋顶
在房子与房子之间
烟囱喷吐着灰烬般的人群
温暖从明亮的树梢吹散
逗留在贫困的烟头上
一只只疲倦的手中
升起低沉的乌云
以太阳的名义
黑暗公开地掠夺
沉默依然是东方的故事
人民在古老的壁画上
默默地永生
默默地死去
呵，我的土地
你为什么不再歌唱
难道连黄河纤夫的绳索
也象崩断的琴弦
不再发出鸣响
难道时间这面晦暗的镜子
也永远背对着你
只留下星星和浮云
我寻找着你
在一次次梦中
一个个多雾的夜里或早晨
我寻找春天和苹果树
蜜蜂牵动的一缕缕微风
我寻找海岸的潮汐
浪峰上的阳光变成的鸥群
我寻找砌在墙里的传说
你和我被遗忘的姓名
如果鲜血会使你肥沃
明天的枝头上
成熟的果实
会留下我的颜色
必须承认
在死亡白色的寒光中
我，战栗了
谁愿意做陨石
或受难者冰冷的塑像
看着不熄的青春之火
在别人的手中传递
即使鸽子落到肩上
也感不到体温和呼吸
它们梳理一番羽毛
又匆匆飞去
我是人
我需要爱
我渴望在情人的眼睛里
度过每个宁静的黄昏
在摇篮的晃动中
等待着儿子第一声呼唤
在草地和落叶上
在每一道真挚的目光上
我写下生活的诗
这普普通通的愿望
如今成了做人的全部代价
一生中
我曾多次撒谎
却始终诚实地遵守着
一个儿时的诺言
因此，那与孩子的心
不能相容的世界
再也没有饶恕过我
我，站在这里
代替另一个被杀害的人
没有别的选择
在我倒下的地方
将会有另一个人站起
我的肩上是风
风上是闪烁的星群
也许有一天
太阳变成了萎缩的花环
垂放在
每一个不朽的战士
森林般生长的墓碑前
乌鸦，这夜的碎片
纷纷扬扬
-end-

作者简历
北岛，1949年出生，本名赵振开，曾用笔名：北岛，石默。祖籍浙江湖州，生于北京。 　
1978年同诗人芒克创办民间诗歌刊物《今天》。
1990年旅居美国，现任教于香港中文大学。曾获得诺贝尔文学奖提名。他的诗刺穿了乌托邦的虚伪，呈现出了世界的本来面目。一句“我不相信”的呐喊，震醒了茫茫黑夜酣睡的人们。 　
1969年当建筑工人，后在某公司工作。80年代末移居国外。
1978年前后，他和诗人芒克创办《今天》，成为朦胧诗的代表性诗人。
1989年4月，北岛离开大陆，先后在德国、挪威、瑞典、丹麦、荷兰、法国、美国等国家居住。
北岛曾著有多种诗集，作品被译成二十余种文字，先后获瑞典笔会文学奖、美国西部笔会中心自由写作奖、古根海姆奖学金等，并被选为美国艺术文学院终身荣誉院士。 
现任教于香港中文大学。

以上资料来自百度百科
--------------------------------------------------------------*/
//-->
</script>