web前端|js教程
html5,h5,雨伞
web前端-js教程HMTL5的学习断断续续，方法不用又生疏了，昨天做的一个雨伞的Demo，先看看效果
华夏II服务端源码,mac版vscode 浏览效果,ubuntu 终端退出,tomcat内存最大设置,sqlite 分库,网页设计 banner,php 连接数据库出现乱码,阿里云服务器创建快照,wordpress首页显示摘要的插件,fanui前端框架,爬虫学英语,php v8js,seo服务是什么,springboot全局锁,html5网站模版编辑器,网页播放器带歌词,增删改查网页模板,微网站模板前后台,ecshop注册页面修改,php设备管理系统 开源,微擎的小程序lzw
微信服务号php源码,ubuntu设置交换内存,tomcat快捷方式闪退,termux安装爬虫,宝塔内网安装不是php,梧州seo价格lzw
主要是运用了中心点变换和旋转两个方法。不同的动画用定时器控制，
皇冠娱乐源码,学会vscode能干什么,优秀的ubuntu,怎么知道电脑tomcat,爬虫课讲解,php运行url,白沙黎族自治县seolzw
下面是全部代码：
var ctx; var everything = []; var cwidth = 1200; var cheight = 600; var updowntime = 0; var rotatetime = 0; var my = 2; var updown; var rotateangle = 0; function Umbrellas(sx, sy, fillStyle) { this.x = sx; this.y = sy; this.fillStyle = fillStyle; this.draw = drawUmbrella; this.moveit = moveumbrella; } function drawUmbrella() { //先画半圆 ctx.fillStyle = this.fillStyle; ctx.beginPath(); ctx.arc(this.x, this.y, 30, 0, Math.PI, true); ctx.closePath(); ctx.fill(); // ctx.save(); ctx.fillStyle = "blue"; ctx.fillRect(this.x - 1.5, this.y, 1.5, 40);//画伞柄 是一个细长的矩形 ctx.beginPath(); ctx.strokeStyle = "blue"; ctx.arc(this.x - 5, this.y + 40, 4, Math.PI, Math.PI * 2, true);//伞的钩子 是一个半圆 ctx.stroke(); ctx.closePath(); } function moveumbrella(dx, dy) { this.x += dx; this.y += dy; } function init() { ctx = document.getElementById("myCanve").getContext(2d); ctx.translate(200, 300); for (var i = 0; i < 10; i++) {var um = new Umbrellas(i * 70, 0, "rgb(" + (30 * i) + "," + (255 - 30 * i) + ",255)");everything.push(um); } updown = setInterval(change, 100); setTimeout(function () { clearInterval(updown); ctx.translate(300,0);//改变中心点 setInterval(rotat, 100); }, 10000); } //updownfunction change() { if (updowntime % 50 == 0) {my = -my; } // 清屏要关注到原中心点 clear(-200,-300); updowntime++; for (var i = 0; i < everything.length; i++) {if (i % 2 == 0) { everything[i].moveit(0, my);} else { everything[i].moveit(0, -my);}everything[i].draw(); } $("#ta").html("坐标y:" + everything[0].y + "updowntime:" + updowntime); //放在这才有效 在执行方法里面停止 if (updowntime == 100) {clearInterval(updown);//过渡方法 } } //选择 function rotat() { clear(-400, -300); rotatetime++; for (var i = 0; i < everything.length; i++) {ctx.save();ctx.rotate(Math.PI * (2 / 4 + i / 4));ctx.translate(0, rotateangle);// 统一坐标everything[i].x = 0;everything[i].y = 0;everything[i].draw();ctx.restore(); } rotateangle++; $("#ta").html("角度:" + rotateangle + " rotatetime:" + rotatetime); if (rotateangle == 70) {rotateangle = -rotateangle; } } function clear(x,y) { ctx.clearRect(x, y, 1200, 600); } window.onload = function () { init(); }
自己觉得蛮有意思，这些小而美的东西是不是给你有所启发呢。
如果不是建立对象，则画出来的雨伞不容易控制。下面的代码就是静态的雨伞
function drawTop(ctx,fillStyle) {ctx.fillStyle = fillStyle;ctx.beginPath();ctx.arc(0, 0, 30, 0, Math.PI, true);ctx.closePath();ctx.fill(); } function drawGrip(ctx) {ctx.save();ctx.fillStyle = "blue";ctx.fillRect(-1.5, 0, 1.5, 40);ctx.beginPath();ctx.strokeStyle = "blue";ctx.arc(-5, 40, 4, Math.PI, Math.PI * 2, true);ctx.stroke();ctx.closePath();ctx.restore(); } function draw() {var ctx = document.getElementById("myCanve").getContext("2d");ctx.translate(150, 150);for (var i = 0; i < 10; i++) { ctx.save(); ctx.rotate(Math.PI * (2 / 4 + i / 4));ctx.translate(0, -100); //ctx.translate(70 * i, 0); drawTop(ctx, "rgb(" + (30 * i) + "," + (255 - 30 * i) + ",255)"); drawGrip(ctx); ctx.restore();} } window.onload=function() {draw(); }
