【Canvas与艺术】四钺孔方兄

于 2024-08-17 15:18:16 发布
阅读量563 收藏 4
点赞数 8
分类专栏： 艺术 文章标签： canvas 艺术 绳结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/River_Sun/article/details/141281004
版权

【成图】

【代码】

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

        const N=4;    // 四股
        const D=20; // 原点到起点的距离
        const R=10*D;// Radius,大圆弧        
        const T=D/Math.sqrt(2); // Thickness,厚度
        const G=4;    // Gap,间隔
        
        // 辅助线开始
        /*
        ctx.lineWidth=2;
        ctx.strokeStyle="navy";
        // 辅助大圆
        ctx.beginPath();
        ctx.arc(0,0,R,0,Math.PI*2,false);
        ctx.closePath();        
        ctx.stroke();

        // 辅助小圆
        ctx.beginPath();
        ctx.arc(0,0,R-T,0,Math.PI*2,false);
        ctx.closePath();        
        ctx.stroke();

        // 中心线
        ctx.lineWidth=2;
        for(var i=0;i<8;i++){
            var theta=Math.PI/4*i
            var p=createPt(R*Math.cos(theta),R*Math.sin(theta));
            
            ctx.beginPath();
            ctx.moveTo(0,0);
            ctx.lineTo(p.x,p.y);
            ctx.stroke();
        }

        ctx.lineWidth=1;
        
        // 竖线
        ctx.beginPath();
        ctx.moveTo(-D,-R);
        ctx.lineTo(-D,R);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(-D-T,-R);
        ctx.lineTo(-D-T,R);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(D,-R);
        ctx.lineTo(D,R);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(D+T,-R);
        ctx.lineTo(D+T,R);
        ctx.stroke();

        // 横线
        ctx.beginPath();
        ctx.moveTo(-R,-D);
        ctx.lineTo(R,-D);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(-R,-D-T);
        ctx.lineTo(R,-D-T);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(-R,D);
        ctx.lineTo(R,D);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(-R,D+T);
        ctx.lineTo(R,D+T);
        ctx.stroke();
        */
        // 辅助线结束

        ctx.strokeStyle="red";

        for(var i=0;i<N;i++){
            var theta=Math.PI*2/N*i;

            var angle=theta;
            var r=D;
            var a=createPt(r*Math.cos(angle),r*Math.sin(angle));

            angle=theta-Math.PI/4;
            r=(T+D)*Math.sqrt(2);
            var b=createPt(a.x+r*Math.cos(angle),a.y+r*Math.sin(angle));

            angle=theta;
            r=Math.sqrt((R-T)*(R-T)-(D+T)*(D+T))-2*D-T;
            var c=createPt(b.x+r*Math.cos(angle),b.y+r*Math.sin(angle));
            
            var offset=Math.asin((D+T)/(R-T));

            angle=theta-Math.PI/4;
            r=Math.sqrt(2)*(D+T);
            var omega=createPt(r*Math.cos(angle),r*Math.sin(angle));

            angle=theta-Math.PI/2;
            r=D;
            var d=createPt(omega.x+r*Math.cos(angle),omega.y+r*Math.sin(angle));

            angle=theta+Math.PI/4*3;
            r=(D)*Math.sqrt(2)-G;
            var e=createPt(d.x+r*Math.cos(angle),d.y+r*Math.sin(angle));

            angle=theta+Math.PI/4*5;
            r=T*Math.sqrt(2);
            var f=createPt(e.x+r*Math.cos(angle),e.y+r*Math.sin(angle));

            angle=theta-Math.PI/4;
            r=(D)*Math.sqrt(2)-G;
            var g=createPt(f.x+r*Math.cos(angle),f.y+r*Math.sin(angle));

            angle=theta-Math.PI/2;
            r=Math.sqrt(R*R-D*D)-2*(T+D);
            var h=createPt(g.x+r*Math.cos(angle),g.y+r*Math.sin(angle));

            var offset1=Math.asin(D/R);
            angle=theta-offset1;
            r=R;
            var j=createPt(0+r*Math.cos(angle),0+r*Math.sin(angle));

            angle=theta+Math.PI;
            r=Math.sqrt(R*R-D*D)-2*(T+D);
            var k=createPt(j.x+r*Math.cos(angle),j.y+r*Math.sin(angle));

            angle=theta+Math.PI/4*3;
            r=Math.sqrt(2)*(D+T+D)-G;
            var m=createPt(k.x+r*Math.cos(angle),k.y+r*Math.sin(angle));

            angle=theta+Math.PI/4*5;
            r=Math.sqrt(2)*(T);
            var n=createPt(m.x+r*Math.cos(angle),m.y+r*Math.sin(angle));
        
            ctx.fillStyle="black";;
            ctx.beginPath();    
            ctx.moveTo(a.x,a.y);
            ctx.lineTo(b.x,b.y);
            ctx.lineTo(c.x,c.y);
            ctx.arc(0,0,R-T,theta-offset,theta-Math.PI/2+offset,true);
            ctx.lineTo(d.x,d.y);
            ctx.lineTo(e.x,e.y);
            ctx.lineTo(f.x,f.y);
            ctx.lineTo(g.x,g.y);
            ctx.lineTo(h.x,h.y);            
            ctx.arc(0,0,R,theta-Math.PI/2+offset1,theta-offset1,false);
            ctx.lineTo(j.x,j.y);
            ctx.lineTo(k.x,k.y);
            ctx.lineTo(m.x,m.y);
            ctx.lineTo(n.x,n.y);
            ctx.closePath();
            ctx.stroke();    
            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

普兰店拉马努金
关注
  • 8
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CANVAS游戏开发与实战
07-23
资源名称：CANVAS游戏开发与实战 资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
Canvas与Image互相转换示例代码
12-13
JS Canvas与Image互相转换 原文演示: JavaScript Canvas Image Conversion Demo在上周的Mozilla Web开发 会议,最后我们花了大半天的时间讨论未来的Mozilla市场应用。Instagram是近期最火爆的移动应用,以10亿美元的...
【Canvas与艺术】四色孔方兄
一念非凡(46岁待业程序员)
07-29 352
用Html5/Canva绘制四个逗号围成的孔方兄图案。
学习 canvas （四） 绘制动画
小小的前端
06-03 8681
使用requestAnimationFrame绘制动画 在canvas中的动画，我们可以理解为，canvas在一遍又一遍的绘制相同的东西。为了更好的适应人体的眼睛，我们绘制图像的间隔最好在16毫秒。 当然在JavaScript中setInterval()函数也可以实现间隔16毫秒后继续绘制，不过它将始终以相同的速度绘制，而不管用户使用的是哪种浏览器，用户在做什么。会导致，它可以工作，但是效率不高。 requestAnimationFrame 浏览器在下次重绘之前调用指定的回调函数。在某个时候，当浏览器准备
Canvas魔法之黑客帝国特效
Java 技术专栏，从入门到精通，熟悉企业级开发
02-26 5546
今天我们实现黑客帝国（The Matrix）风格的字母掉落效果。 使用工具：Chrome浏览器（或其他支持H5的浏览器） 使用语言：HTML + JavaScript + Canvas + requestAnimationFrame
canvas绘制直线、折线、矩形与多边形
zhang_cherry的博客
01-09 1万+
1、canvas的width和height属性与style中的width和height的区别 canvas是html5新增的绘图工具。通过canvas标签创建画布后，它有三个基本要素：id、宽度和高度。 特别注意的是：canvas的宽度和高度不能在style里面设置，因为此时设置的是div的宽度和高度，canvas会使用默认的宽度（300px），高度（150px）。 <canvas id="canvas" width="200px" height="200px" style="border: #138
Html2Canvas 常见问题
Eighteen Z
07-28 6191
1. 文字样式丢失且都变成为最小号字体。 解决方案： 需要截图的节点根样式添加font-variant: normal； 2. 文字向下偏移。 解决方案： 指定html2canvas的版本号为1.0.0-alpha.12 3. 不完整，缺失，留白。 出现情况： 当截图区域超过视图高度，且滚动条未处在顶部时，会出现。 解决方案： 截图之前控制滚动条至顶部。 4. 模糊，不清晰。 出现情况： 通常是图片设置为背景的情况下，截图会比较模糊。 解决方案： 将背景图通过img标签加定位的方式实现。 ...
canvas与svg
qq_42883190的博客
03-14 5588
svg和canvas的区别
前端基于DOM或者Canvas实现页面水印
热门推荐
编码世界
01-28 7万+
我们会看到很多页面带有水印，但是怎么实现呢？当然可以有多种实现方式，本文主要讲解在vue项目中基于DOM或者Cavans实现水印效果，当然还有其他的实现方式，比如在原图片的基础上加上水印生成新的图片，但是这需要后端处理。因为要在vue项目中使用，所以我使用自定义指令可以直接对挂载的dom实现水印效果。
Canvas与Image互相转换
铁锚的CSDN博客
08-09 4万+
JS Canvas与Image互相转换 原文地址: JavaScript Canvas Image Conversion 原文演示: JavaScript Canvas Image Conversion Demo 原文日期：2012年05月08日 翻译日期：2013年08月09日 在上周的Mozilla Web开发 会议,最后我们花了大半天的时间讨论未来的Mozilla市
Canvas的基本介绍与使用，图解+案例带你快速上手Canvas
~~~
09-16 5101
Canvas的基本介绍与使用，图解+案例带你快速上手Canvas
JavaScript canvas绘制圆弧与圆形
01-19
本文实例为大家分享了canvas绘制圆弧与圆形的具体代码，供大家参考，具体内容如下 canvas 绘制圆弧 绘制圆弧使用 context.arc( ) 函数，包含六个参数。 context.arc( centerx,centery,radius, startingAngle,...
Canvas与图片压缩的示例代码
09-27
### Canvas与图片压缩的知识点详解 #### Canvas的基本概念 Canvas是HTML5中一种新的元素，它提供了一块画布（canvas）供脚本语言（通常为JavaScript）进行图形操作。它允许开发者通过JavaScript中的API在网页上绘制...
VB+ACCESS户籍管理系统(论文+系统).zip
08-16
计算机毕业设计资源包含（项目部署视频+源码+LW+开题报告等等），所有项目经过助教老师跑通，有问题可以私信博主解决，可以免费帮部署。
TCL TC19T电磁炉原理图.rar
08-16
TCL TC19T电磁炉原理图
全球与中国活塞式压缩机市场现状及未来发展趋势（2024版）.docx
08-16
全球与中国活塞式压缩机市场现状及未来发展趋势（2024版）.docx
Qt5.9 C++开发指南示例代码
08-16
时间日期与定时器
基于Springboot的学院个人信息管理系统（有报告） Javaee项目，springboot项目
最新发布
08-16
资源详情：https://blog.csdn.net/2302_78191516/article/details/141270029
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值