首页 > 其他分享 >【Canvas与艺术】四色孔方兄

【Canvas与艺术】四色孔方兄

时间:2024-07-29 23:27:21浏览次数:13  
标签:function 四色 Canvas 孔方兄 ctx canvas HEIGHT WIDTH stage

【成图】

【代码】

<!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>
        </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 = "black";
        ctx.fillRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);

        // 二维数组,由淡到浓
        var colors=[["rgb(255,160,66)","rgb(234,117,0)"],
                    ["rgb(255,81,81)","rgb(234,0,0)"],
                    ["rgb(166,255,255)","aqua"],
                    ["lime","green"],];

        var r=150;// 方孔对角线的一半
        for(var i=0;i<4;i++){
            var theta=Math.PI/2*i;
            // 起点
            var d=createPt(r*Math.cos(theta),r*Math.sin(theta));

            var r1=r/Math.sqrt(2);// 小弧半径
            // 开始小弧的圆心
            var o1=createPt(r1*Math.cos(theta+Math.PI/4),r1*Math.sin(theta+Math.PI/4));
            // 最后小弧的圆心
            var o2=createPt(r1*Math.cos(theta-Math.PI/4),r1*Math.sin(theta-Math.PI/4));

            // 渐变色
            var gnt=ctx.createRadialGradient(o2.x,o2.y,r,o1.x,o1.y,r);            
            gnt.addColorStop(0.9,colors[i][0]);
            gnt.addColorStop(0.1,colors[i][1]);
            ctx.fillStyle=gnt;

            ctx.beginPath();
            ctx.moveTo(d.x,d.y);// 起点
            ctx.arc(o1.x,o1.y,r1,theta-Math.PI/4,theta+Math.PI/4,false);// 开始小弧
            ctx.arc(0,0,r*Math.sqrt(2),theta+Math.PI/4,theta-Math.PI/4,true);// 中间大弧
            ctx.arc(o2.x,o2.y,r1,theta-Math.PI/4,theta-Math.PI*3/4,true);// 最后小弧
            ctx.closePath();
            ctx.fill();
        }

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


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

/*-------------------------------------------------------------
百年前抛头颅洒热血的志士英豪们,今天这世界如你们所愿了吗?
--------------------------------------------------------------*/
//-->
</script>

END

标签:function,四色,Canvas,孔方兄,ctx,canvas,HEIGHT,WIDTH,stage
From: https://blog.csdn.net/River_Sun/article/details/140783698

相关文章

  • 微信小程序地图Map结合canvas实现手动绘制地图区域
    1.功能概述在微信小程序中,用户手动在地图上绘制区域,将绘制的区域边界点转换为经纬度在地图上显示绘制的区域。此功能实现了用户与地图的交互,可以应用于地理围栏、区域标记等场景。2.实现步骤2.1获取用户位置在小程序加载时,使用wx.getLocation获取用户的当前位置,并......
  • PixiJS源码分析系列:第三章 使用 canvas 作为渲染器
    使用canvasRenderer渲染上一章分析了一下Sprite在默认webgl渲染器上的渲染,这章让我们把目光聚集到canvasRenderer上使用canvas渲染器渲染图片的demo要使用canvas作为渲染器,我们需要引用pixi-legacy.js/bundles/pixi.js-legacy/dist/pixi-legacy.js像下面这样......
  • Android开发 - Canvas类与Paint画笔的绘制详解与使用
    Canvas类是什么Android中Canvas类常用于自定义View等操作中,Canvas则如同一张画布可以在上面绘制内容,然后这张画布也可以叠加其他的图层或者平移旋转等操作。Canvas对象的获取方式有两种:一种我们通过重写onDraw方法,View中重写onDraw(Canvascanvas)Canvas对象会被当做参数传递过......
  • Android开发 - Canvas中Path路径的详解与使用
    Path回顾Path类封装复合(多轮廓)几何路径由直线段、二次曲线和三次曲线组成。它可以用画布绘制:canvas.drawPath(path,paint),填充或笔划(基于绘画的样式),或者可以用于剪裁或绘制路径上的文本。Path既是路径,路径走多了就变成一种套路,只要我们会解套,那这种套路就是高速公路。路径走完形......
  • Canvas+bpmn.js 流程节点鼠标悬浮显示信息 (全网首发)
    customBpmn.jsimportinheritsfrom"inherits";importViewerfrom"bpmn-js/lib/Viewer";importZoomScrollModulefrom"diagram-js/lib/navigation/zoomscroll";importMoveCanvasModulefrom"diagram-js/lib/navigation/moveca......
  • canvas webgl
       varaa=document.createElement('canvas');ab=aa.getContext('webgl');debugger;varac={'contextName':ab.getParameter(ab['VERSION']),'glVersion':ab.getParameter(ab['VERSION......
  • Android开发 - onDraw方法中canvas参数解析与使用
    drawRoundRect参数解析canvas.drawRoundRect(RectFrect,floatrx,floatry,Paintpaint):rect:RectF对象rx:x方向上的圆角半径ry:y方向上的圆角半径paint:绘制时所使用的画笔绘制圆角矩形实例实例protectedvoidonDraw(Canvascanvas){//TODOAuto-generat......
  • 基于 HTML5 和 Canvas 开发的在线图片编辑器
    预览https://zaixianps.net技术栈HTML5:构建用户界面,提供语义化标签。CSS3:美化界面,增强用户体验。JavaScript:处理用户交互,管理Canvas操作。CanvasAPI:主要绘图工具,用于图像处理。项目结构image-editor/│├──index.html//主页面├──style.css//......
  • 【Canvas与艺术】五星五色瓶盖
    【成图】【代码】<!DOCTYPEhtml><htmllang="utf-8"><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><head><title>五星五色瓶盖艺术</title><styletype="text/css&q......
  • 【Canvas与艺术】不忘初心之五角星
    【成图】【代码】<!DOCTYPEhtml><htmllang="utf-8"><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><head><title>不忘初心</title><styletype="text/css"......