canvas画ladingview

PROMULGATOR

我的坚强不是让你往死里伤

北京市云创讯通科技有限公司

← 让页面只能在微信端浏览器中打开

→ js从身份证获取年龄

相关代码

canvas画ladingview

canvas画图板

canvas炫酷时钟

Html

Css

Js

   .father{
    	display: flex;
    	align-items:center;
    	justify-content: center;
    	height:100vh;

    }
     #canvas{
     	background: linear-gradient(red, blue); /* 标准的语法 */
     	display: flex;
     }

var can = document.getElementById('canvas');
	var ctx = can.getContext("2d");
	var mWidth = canvas.width; //画布的宽
	var mHeight = canvas.height; //画布的高
	var mMaxOffset = 150; //圆最大偏移量
	var mMaxRadius = 30; //圆半径
	var mColor = '#fff'; //颜色
	var mOffset = 0; //偏移量
	var mDegrees = 0; //画布转角
	//第一步 画圆
	function drawCircle() {
	    ctx.clearRect(0, 0, mWidth, mHeight);
	    ctx.beginPath();
	    ctx.arc(mWidth / 2, mHeight / 2 - mOffset, mMaxRadius, 0, Math.PI * 2); //在中心点上方mOffset处画圆
	    ctx.closePath();
	    ctx.fillStyle = mColor;
	    ctx.fill();
	    ctx.beginPath();
	    ctx.arc(mWidth / 2, mHeight / 2 + mOffset, mMaxRadius, 0, Math.PI * 2); //在中心点下方mOffset处画圆
	    ctx.closePath();
	    ctx.fill();
	}
	//第二步 使画布旋转起来
	setInterval(function() {
    drawCircle();
    rotate();
    var present = mDegrees / 360;
    if (present < 0.5) {
        mOffset = mMaxOffset * present; //改变圆心位置，使其靠近中心点
    } else {
        mOffset = mMaxOffset * (1 - present);
    }
    //第三步 就是粘合动画函数
	if (present <= 0.375 || present >= 0.625) drawPath(present); //当两圆接触时绘制粘合动画
	}, 30)
	function rotate() {
	    canvas.style.transform = `rotate(${mDegrees}deg)`; //使canvas旋转
	    mDegrees += 2;
	    if (mDegrees == 360) {
	        mDegrees = 0;
	    }
	}
	
    //第四步 就是粘合动画函数
    function drawPath(present) {
    var suppoetOffset = -mMaxRadius;
    ctx.beginPath();
    ctx.moveTo(mWidth / 2 - mMaxRadius, mHeight / 2 - mOffset); //从上圆最左点开始画线
    ctx.lineTo(mWidth / 2 + mMaxRadius, mHeight / 2 - mOffset); //到上圆最右点
    if (present < 0.25 || present > 0.75) { //当两球相交
        suppoetOffset = mMaxRadius;
    } else if (present <= 0.375) { //当两球刚分离时
        suppoetOffset = -(480 * present - 150);
    } else if (present >= 0.625) { //当两球快要接触时
        suppoetOffset = 480 * present - 330;
    }
    // 贝塞尔选点以中心点便宜30以内距离为控制点，另一圆边点为结束点
    ctx.quadraticCurveTo(mWidth / 2 + suppoetOffset, mHeight / 2, mWidth / 2 + mMaxRadius, mHeight / 2 + mOffset);
    ctx.lineTo(mWidth / 2 - mMaxRadius, mHeight / 2 + mOffset);
    ctx.quadraticCurveTo(mWidth / 2 - suppoetOffset, mHeight / 2, mWidth / 2 - mMaxRadius, mHeight / 2 - mOffset);
    ctx.closePath();
    ctx.fill();
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.0.0

立即下载

canvas画ladingview

代码描述：canvas画ladingview

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas画ladingview-jq22.com</title> <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号