【Canvas与艺术】绘制蓝色森麒麟轮胎

已于 2024-04-23 07:37:46 修改
阅读量787 收藏 5
点赞数 24
分类专栏： 艺术 文章标签： canva可画 html5 轮胎 轮毂
于 2024-04-22 08:23:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/River_Sun/article/details/138057706
版权

【关键点】

1.月牙高光的使用；

2.arcTo函数对于创造圆角的巧用。

【成果图】

【代码】

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>使用HTML5/Canvas绘制蓝色森麒麟轮胎</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);// 清屏            
        writeText(ctx,WIDTH/2-30,HEIGHT/2-6,"逆火原创","8px consolas","black");// 版权
    }

    // 画前景
    this.paintFg=function(ctx){
        // 渐变色圆形实体
        ctx.beginPath();
        ctx.arc(0,0,240,0,Math.PI*2,false);
        ctx.closePath();
        var lgrd=ctx.createLinearGradient(0,-240,0,240);
        lgrd.addColorStop(0,"rgb(1,152,225)");
        lgrd.addColorStop(1,"rgb(1,97,139)");
        ctx.fillStyle=lgrd;
        ctx.fill();

        // 月牙状白色高光
        var radius=220;
        var angle=Math.PI/6;
        ctx.beginPath();
        ctx.arc(0,0,radius,Math.PI*3/2-angle,Math.PI*3/2+angle,false);
        ctx.arc(0,radius,2*radius*Math.cos(angle/2),-Math.PI/2+angle/2,-Math.PI/2-angle/2,true);
        ctx.fillStyle="white";
        ctx.fill();

        // 白圈
        ctx.beginPath();
        ctx.arc(0,0,160,0,Math.PI*2,false);
        ctx.closePath();
        ctx.fillStyle="white";
        ctx.fill();

        // 轮胎纹
        var R=160;
        for(var i=0;i<36;i++){
            var theta=i*Math.PI*2/36;
            var outer=createPt(R*Math.cos(theta),R*Math.sin(theta));

            ctx.save();            
            ctx.translate(outer.x,outer.y);
            ctx.rotate(theta);
            ctx.beginPath();
            ctx.moveTo(0,-2);
            ctx.lineTo(-15,0);
            ctx.lineTo(0,2);
            ctx.closePath();
            ctx.fillStyle="rgb(0,122,185)";
            ctx.fill();
            ctx.restore();
        }

        // 轮毂外圈
        ctx.beginPath();
        ctx.arc(0,0,110,0,Math.PI*2,false);
        ctx.closePath();
        ctx.lineWidth=6;
        ctx.strokeStyle="rgb(0,122,185)";
        ctx.stroke();

        // 轮毂六瓣
        var r=96;
        for(var i=0;i<6;i++){
            var theta=i*Math.PI*2/6;

            var start=theta-Math.PI/36*5;
            var startPt=createPt(r*Math.cos(start),r*Math.sin(start));
            var end=theta+Math.PI/36*5;
            var endPt=createPt(r*Math.cos(end),r*Math.sin(end));
            var midPt=createPt(40*Math.cos(theta),40*Math.sin(theta));

            ctx.beginPath();
            ctx.arc(0,0,r,start,end,false);
            ctx.arcTo(midPt.x,midPt.y,startPt.x,startPt.y,16);
            ctx.closePath();
            ctx.lineWidth=6;
            ctx.lineJoin="round";
            ctx.strokeStyle="rgb(0,122,185)";
            ctx.stroke();
        }
    
        // 六个圆点
        var r=30;
        for(var i=0;i<6;i++){
            var theta=i*Math.PI*2/6+Math.PI/6;
            var midPt=createPt(r*Math.cos(theta),r*Math.sin(theta));

            ctx.beginPath();
            ctx.arc(midPt.x,midPt.y,5,0,Math.PI*2,false);
            ctx.closePath();
            ctx.fillStyle="rgb(0,122,185)";
            ctx.fill();
        }

        // 中心圆点
        ctx.beginPath();
        ctx.arc(0,0,15,0,Math.PI*2,false);
        ctx.closePath();
        ctx.fillStyle="rgb(0,122,185)";
        ctx.fill();
    }
}

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

普兰店拉马努金
关注
  • 24
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html canvas图片上绘制文字,如何用HTML5 CANVAS绘制文字
weixin_34260787的博客
06-05 3625
您可能感兴趣的话题：绘制文字核心提示：如何在HTML5 canvas上绘制绘制文字，并且可以设置文字的字体，大小和颜色。我们可以在HTML5 canvas上绘制绘制文字，并且可以设置文字的字体，大小和颜色。绘制文字的字体由2D上下文的font属性来控制。如果你需要使用颜色来填充文字或制作描边文字，可以使用2D上下文的fillStyle和strokeStyle属性来完成。要在canvas上绘制文字，...
html5 canvas绘制艺术彩笔涂鸦动画特效.zip
07-11
代码片段： ...html5 canvas绘制艺术彩笔涂鸦动画特效</title> <link rel="stylesheet" href="css/style.css?3.1.64"> </head> <body> <canvas id="canvas"></canvas>
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
【Canvas与艺术】绘制古典火炮发射炮弹
一念非凡(46岁待业程序员)
04-25 1156
使用HTML5/Canvas绘制古典火炮发射炮弹
使用画布绘制自定义图形（Canvas）
01-15 1994
使用CanvasRenderingContext2D对象在Canvas画布上绘制。@Entry@Component//用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿，true表明开启抗锯齿。//用来创建CanvasRenderingContext2D对象，通过在canvas中调用CanvasRenderingContext2D对象来绘制。build() {//在canvas中调用CanvasRenderingContext2D对象。
Canvas绘制地图
qq_40289557的博客
02-22 8155
在我们的大屏可视化项目中，地图数据可视化是最常见功能。地图数据可视化目前的实现方案有很多，其中最具有代表性的莫过于使用echarts，引入一个js文件，再加上一些简单的配置，这样一个地图就展示出来了。但是作为一名优秀的前端程序员，对于很多技术，我们既要知其然，也要只其所以然，本章节以HTML5中的Canvas技术为背景，简单讲解一下地图数据可视化实现的一些思路。
Canvas绘制饼状图、绘制文字、绘制图像
知之为知之，不知为不知
08-27 1221
canvas 绘制圆弧；canvas 绘制扇形；canvas 绘制饼形图；canvas 绘制圆角矩形；canvas 绘制文字；canvas 设置文字属性；canvas 绘制图片；canvas 平移转换；canvas 旋转转换；canvas 缩放转换；canvas 绘制一个n等分的圆；canvas 绘制饼状图；canvas 绘制折线图；
Canvas与Drawable绘制图形
dapangzao的专栏
04-18 1万+
一、图形展示 Android中提供两种方式来绘制图形到view上。 1.将Drawable（包括图片、动画等）绘制到view对象 如图片，图形，动画等，适用于一些实现简单且不需要动态改变的图形，比如动画，shape等。 Drawable是可绘制图形的抽象。其可以定义各种可绘制图形，包括ShapeDrawable、BitmapDrawable等等。当然也可以自定义一些drawable对象。
h5 Canvas矩形的绘制
suwu150
02-26 9489
h5 Canvas矩形的绘制 1.绘制矩形api 在Canvas中提供了绘制矩形的API： fillRect(x, y, width, height)：绘制一个填充的矩形 strokeRect(x, y, width, height)：绘制一个矩形的边框 clearRect(x, y, width, height)：清除指定矩形区域，让清除部分完全透明 除此之外还可以通过Canvas中Canv...
canvas自定义绘制顺序解决遮挡问题
~~~
06-24 2094
通过自定义绘制顺序来解决canvas的叠加遮挡问题。定义一个数组，把所有要执行的函数方法push到数组中，即把函数当做数组的元素存储在数组中，这样就可以通过数组的方法来操作这些函数，然后对函数按照自定义的顺序进行排序，需要先执行的放前面，后执行的放后面，最后遍历函数数组并执行其中的每个函数即可。
JavaScript canvas绘制圆弧与圆形
10-15
主要为大家详细介绍了JavaScript canvas绘制圆弧与圆形，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Canvas绘制点与点相交线样式特效代码
03-20
Canvas绘制点与点相交线样式代码是一款基于Html5 Canvas制作的动态背景特效。
详解canvas在圆弧周围绘制文本的两种写法
09-28
主要介绍了详解canvas在圆弧周围绘制文本的两种写法，直接按弧度进行编写的，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
HTML5表单元素：重塑数据收集的艺术
艾恩小灰灰的博客
06-08 441
HTML5表单元素和属性的引入，不仅简化了前端开发者的代码，更重要的是，它们为用户提供了更加友好和直观的交互体验。从自动验证到动态反馈，从自动完成到无障碍支持，HTML5表单功能的提升为现代Web应用设计奠定了坚实的基础。作为开发者，掌握并有效利用这些特性，将大大提升表单的数据收集效率和用户满意度。随着Web技术的不断发展，探索和实践这些新特性，将使我们的网页应用更加先进和富有竞争力。
chromedriver-win64_116.0.5840.0.zip
最新发布
06-15
chromedriver-win64_116.0.5840.0.zip
基于Java Servlet实现的灾情控制系统.zip
06-15
该资源内项目源码是个人的课程设计、毕业设计，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ ## 项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 该资源内项目源码是个人的课程设计，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ ## 项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。
计算机毕业设计-求职与招聘.zip
06-15
计算机毕业设计资源包含（项目部署视频+源码+LW+开题报告等等），所有项目经过助教老师跑通，有任何问题可以私信博主解决，可以免费帮部署。
【PID优化】粒子群算法和遗传算法自动电压调节器 (AVR) 系统PID控制器优化调整【含Matlab源码 4698期】.zip
06-15
Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
uniapp中使用vue3通过canvas绘制蓝色网格
12-15
以下是使用Vue3和Canvas在Uniapp中绘制蓝色网格的示例代码： ```vue <canvas ref="canvas" @ready="onReady" /> import { onMounted, ref } from 'vue' export default { setup() { const canvasRef = ref...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值