使用canvas画个太阳系
又一波干货来了,如何使用canvas来画一个太阳系,我的天呢,太阳系都能画的出来,canvas真是太强了。有图有真相哦:
什么?说好的太阳系呢,老铁,怎么就看到一个行星?哈,是我偷了懒,我只画了个地球,其他的水星什么的不都是一样的道理吗,是不是?我都给你写出来了,你看着反而没有自己动手试验完善的激情了,是不是?我使用canvas只画了一个,剩下的几个行星你就画了吧,都是照着葫芦画瓢的事情,能画出来并理解了就是你掌握了。注意看代码里面的注释,这些虽然是我以前写的,不过我知道我习惯性的会把自己以前踩的坑都写到代码里面去,别把注释忽略了,指不定看到那句话你就豁然开朗,那岂不是我的荣幸?
太阳系html代码:
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>使用canvas绘制太阳系</title> </head> <body><section><canvas id="sun" width="1000px" height="1000px"></canvas></section> </body> </html>
canvas画太阳系javascript代码:
<script> var num=0; function sun(){var canvas=document.getElementById("sun");var cxt=canvas.getContext("2d");cxt.clearRect(0,0,1000,1000);//画太阳cxt.beginPath();cxt.arc(500,500,20,0,2*Math.PI,false);//设置太阳的径向渐变色//createRadialGradient(内圆x,内圆y,内圆半径,外圆x,外圆y,外圆半径);//var sunColor=cxt.createRadialGradient(500,500,0,500,500,20);var sunColor=cxt.createRadialGradient(490,510,0,500,500,20);// 立体感//addColorStop(0-1,颜色):0-1之间的任意值,代表中间地带的百分比sunColor.addColorStop(0,"#f00");sunColor.addColorStop(1,"#f90");cxt.fillStyle=sunColor;cxt.fill();cxt.closePath();//画地球轨道cxt.beginPath();cxt.arc(500,500,100,0,2*Math.PI,false);cxt.strokeStyle="white";cxt.stroke();cxt.closePath();//画地球cxt.save();cxt.translate(500,500);cxt.rotate((num%360)*Math.PI/180);cxt.beginPath();cxt.arc(0,-100,10,0,2*Math.PI,false);//设置地球的径向渐变色var earthColor=cxt.createRadialGradient(4,-105,0,0,-100,10);// 立体感earthColor.addColorStop(0,"#78b1e8");earthColor.addColorStop(1,"#050c12");cxt.fillStyle=earthColor;cxt.fill();cxt.closePath();cxt.restore();num++;if(num>=360){num=0;} } sun(); setInterval("sun()",100); </script>
canvas绘制太阳系相关的css代码:
<style>section{border: 1px solid darkred;width: 1000px;height: 1000px;background: black;}</style>
使用canvas画个太阳系相关推荐
- 微信小程序中base64格式的小程序码通过canvas画出来无效
使用场景 小程序中的文章详情页面有一个分享功能:用户点击分享按钮,生成一张分享图片(包括封面图,简介以及带有文章ID的小程序码),方便用户保存在本地. 问题说明 小程序码通过后台接口获取,格式如下:' ...
- 关于星空的java小程序_[Java教程]小程序使用Canvas画饼图_星空网
小程序使用Canvas画饼图 2018-10-24 0 先上效果图 -------------------------------------------------------------w --- ...
- python程序、画一个笑脸_如何使用canvas画一个微笑的表情(代码示例)
本篇文章给大家带来的内容是关于如何使用canvas画一个微笑的表情(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实习期间让我用canvas画一个表情,比较简单,话不多说 ...
- [html] 请使用canvas画一个椭圆
[html] 请使用canvas画一个椭圆 <script> var c=document.getElementById("myCanvas"); var ctx=c. ...
- [html] 请使用canvas画一个渐变的长方形
[html] 请使用canvas画一个渐变的长方形 // 普通canvas绘图工具类// umd适配多种引入方式 (function(root, factory) {if (typeof define ...
- HTML5 Canvas 画虚线组件
前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js 1 if (window.CanvasRenderi ...
- html5垂直线怎么画,HTML5 Canvas画线技巧
正统的HTML5 Canvas中如下代码 复制代码代码如下: ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(3 ...
- 毛边效果 html,Html5中Canvas画线有毛边如何解决
Html5 Canvas 所有的画线指令画出来的线条都有毛边(比如 lineTo, arcTo,strokeRect),这是因为在Canvas中整数坐标值对应的位置恰巧是屏幕象素点中间的夹缝,那么当按 ...
- canvas画圆又毛边
canvas画圆又毛边 canvas使用arc()画园有毛边,如图:,只需给其添加width,height即可,直接上代码 <!DOCTYPE html> <html lang=&q ...
最新文章
- 车道线检测算法经典编程
- 项目分析_xxoo-master
- 1026 Modular multiplication of polynomials
- Spark in action on Kubernetes - Playground搭建与架构浅析
- iti axi dsp_ITI的完整形式是什么?
- 【BZOJ3238】差异,后缀数组+单调栈维护height
- MySQL数据库基础(外键约束、添加索引)
- last_inner = inner_lateral + inner_top_down RuntimeError: The size of tensor a (81) must match the s
- python启动方法_python启动服务
- 上传 visio 2003 基本形状图谱
- spring aop切面执行顺序
- android 监听连续点击,android基础之点击监听器的2种监听实现
- 华为手机为什么不用鸿蒙系统,华为手机为何迟迟不搭载鸿蒙系统
- mysql user.myd_“./mysql/user.MYD”未找到(ERRCODE:13 - 拒绝权限)
- ios-GET和POST
- JNI_编程技术__网文整理(中)
- IPD的决策评审CDP(2):因地制宜,因时而动
- 自己计算机设置盘密码怎么操作,怎么给电脑盘设置密码
- Docker学习笔记(2)--Docker常用命令
- 计算机中函数vlookup怎么用,教您使用excel函数vlookup
热门文章
- 网络安全-john-the-ripper哈希破解
- 2022年4月编程语言排行榜:MATLAB 即将跌出前20名
- Allegro如何设通孔Pin和Via的消盘操作指导
- ChinaSkills-网络系统管理(2021年全国职业院校技能大赛C-2 模块 C:网络部分 真题 )
- 【转载】Part I. 设计人员指南---快速入门---模版 + 数据模型 = 输出
- VUE一些指令的使用
- 手机html5页面 带按钮,关于H5的一些按钮
- 深圳市康和盛大楼电能管理系统设计方案
- 使用Palm®(奔迈)Mojo 框架开发JavaScript程序 #0
- 体系结构学习笔记---白话理解Tomasulo算法