canvas-star7.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>添加土地</title> </head> <body><canvas id="canvas" style="margin:0 auto;">The current browser does not support Canvas, can replace the browser a try!</canvas><script>window.onload = function(){var canvas = document.getElementById('canvas');canvas.width = 1200;canvas.height = 800;if(canvas.getContext('2d')){var context = canvas.getContext('2d');// context.fillStyle = "#000";// 背景var skyStyle = context.createRadialGradient(canvas.width/2,canvas.height,0,canvas.width/2,canvas.height,canvas.height);skyStyle.addColorStop(0.0,'#035');skyStyle.addColorStop(1.0,'black');context.fillStyle = skyStyle;context.fillRect(0,0,canvas.width,canvas.height)// 星星for(var i=0;i<200;i++){var r = Math.random() * 5 + 5;var x = Math.random() * canvas.width;var y = Math.random() * canvas.height * 0.65;var a = Math.random() * 360;drawStar(context , x , y , r , a )}// 月亮 fillMoon(context,2,900,200,100,30)// 土地 drawLand(context)}else{alert('当前游览器不支持Canvas,请更换游览器后再试!');}}function drawLand(cxt){cxt.save();cxt.beginPath();cxt.moveTo(0,600);cxt.bezierCurveTo(540,400,660,800,1200,600);cxt.lineTo(1200,800);cxt.lineTo(0,800);cxt.closePath();var landStyle = cxt.createLinearGradient(0,800,0,0);landStyle.addColorStop(0.0,'#030');landStyle.addColorStop(1.0,'#580');cxt.fillStyle = landStyle;cxt.fill();cxt.restore();}function fillMoon(cxt,d,x,y,R,rot,fillColor){cxt.save();cxt.translate(x,y);cxt.rotate(rot*Math.PI/180); cxt.scale(R,R);pathMoon(cxt,d);cxt.fillStyle = fillColor || "#fb5";cxt.fill();cxt.restore();}function pathMoon(cxt,d){cxt.beginPath();cxt.arc(0,0,1,0.5*Math.PI,1.5*Math.PI,true);moveTo(0,-1);cxt.arcTo(d,0,0,1,dis(0,-1,d,0)/d); cxt.closePath();}function dis(x1,y1,x2,y2){return Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2))}function createBackgroundCanvas(){var backCanvas = document.createElement("canvas");backCanvas.width = 100;backCanvas.height = 100;var backCanvasContext = backCanvas.getContext('2d');drawStar(backCanvasContext,50,50,50,0);return backCanvas}function drawStar(cxt,x,y,R,rot){cxt.save();cxt.translate(x,y);cxt.rotate(rot/180*Math.PI); cxt.scale(0.05*R,0.05*R)starPath(cxt);cxt.fillStyle = "#fb3";cxt.strokeStyle = "#fd5";cxt.lineWidth = 3;cxt.lineJoin = "round";cxt.fill();cxt.stroke();cxt.restore()}function starPath(cxt){cxt.beginPath();for(var i=0;i<5;i++){cxt.lineTo(Math.cos( (18+i*72) / 180 * Math.PI )*20,-Math.sin( (18+i*72) / 180 * Math.PI )*20);cxt.lineTo(Math.cos( (54+i*72) / 180 * Math.PI )*0.5*20,-Math.sin( (54+i*72) / 180 * Math.PI )*0.5*20);}cxt.closePath();}</script> </body> <script>/*图形变换位移 translate(x,y)旋转 rotate(deg)缩放 scale(sx,sy)*/ </script> </html>
转载于:https://www.cnblogs.com/cynthia-wuqian/p/4981628.html
canvas-star7.html相关推荐
- canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法 项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
- 画布Canvas的使用
canvas.drawText();//画文本 canvas.drawArc();//画弧 canvas.drawCircle();//画圆 canvas.drawBitmap(); canvas.d ...
- Android 自定义View Canvas —— Bitmap
Bitmap 绘制图片 常用的方法有一下几种 (1) drawBitmap(@NonNull Bitmap bitmap, float left, float top, @Nullable Paint ...
- Android 自定义View —— Canvas
上一篇在android 自定义view Paint 里面 说了几种常见的Point 属性 绘制图形的时候下面总有一个canvas ,Canvas 是是画布 上面可以绘制点,线,正方形,圆,等等,需要和 ...
- android Canvas 最基础知识总结
学习Canvas 要先学习view 知识,这样才好学习 第一步 创建一个方法 让它继承 View 如下图 然后快捷键ait+/ 生成构造方法, 用来初始化View ,比如自定一个一些init()方法, ...
- canvas绘制的文字如何换行
<html><head><title>canvas绘制的文字如何换行</title><style type="text/css" ...
- 从0到1 html5 canvas,Html5 Canvas学习之路(五)
Canvas 图像(上) Canvas 图像API可以加载图像数据,然后直接将图像应用到画布上.还可以裁切.拼贴图像数据,以显示用户需要的部分.此外,Canvas还提供了像素数据的存储功能,这样就能对 ...
- SVG和canvas
1.SVG实现的圆环旋转效果 参考:http://www.softwhy.com/article-6472-1.html 2.SVG中的图形可以通过 transform="matrix(0 ...
- D3.js、HTML5、canvas 开发专题
https://www.smartdraw.com/genogram/ http://www.mamicode.com/info-detail-1163777.html D3折线图 https:// ...
- 7个华丽的基于Canvas的HTML5动画
说起HTML5,可能让你印象更深的是其基于Canvas的动画特效,虽然Canvas在HTML5中的应用并不全都是动画制作,但其动画效果确实让人震惊.本文收集了7个最让人难忘的HTML5 Canvas动 ...
最新文章
- 为ThinkPad T420增加一根4G内存
- 使用Windows远程登录Ubuntu
- graphql_普通英语GraphQL指南
- 宝塔同时安装苹果cms海洋cms_★苹果cms常见问题有哪些?100个常见问题的解决方法...
- Brainfuck解释器(C#)
- ASP.NET Core Web API + Ng6 实战视频 Day 2
- 部署到gcp_剖析大数据公司为什么选择 GCP?
- lintcode-517-丑数
- 资料:vue 3.0+版本发布
- 更好也更快!最先进的图像去模糊算法DeblurGAN-v2
- openssl 创建 CA 详细操作手册
- UI基础--UIStepper步进器
- UDP实现简单的超时重传
- lua 文件读写处理(操作敏感词库)
- 背包问题九讲[转载]
- centerOS7开启网络服务
- 招商证券交易系统宕机上热搜,遭深圳证监局责令整改
- 新点互联互通_新点驱动(江苏省互联互通版)
- linux 1.0 如何运行,观点|Linux 1.0 之旅:回顾这一切的开始
- 用python播放声音文件(mp3、wav、m4a等)
热门文章
- 【theano-windows】学习笔记九——softmax手写数字分类
- 关于slot、slot-scope的指令的一些操作记录
- mysql 和 sqlserver sql差异比较
- HTML的footer置于页面最底部
- How to use external classes and PHP files in Laravel Controller?
- 01-spring配置详解
- WSS3.0自带数据库可以使用SQL 2005 Server Management Studio来管理
- vue2项目使用codemirror插件实现代码编辑器功能
- 10-多写一个@Autowired导致程序崩了
- C++编程基础一 06-布尔类型