jquery/javascript画心爱心方法

jquery/javascript画心爱心方法，只需要设置好画心容器的长宽(必须有长宽)，将这句放入容器中，方法中传入jquery容器对象，调用方法就ok

html代码

<div class="rightFrame" style="border: #000000 solid 1px;width:50px height: 50px;"><canvas id="gycanvas"></canvas>
</div>

js、jquery代码

let rightFrame=$(’.rightFrame’);
drowHert(rightFrame);

function drowHert(conFrame){//画心方法，只需要设置好画心容器的长宽(必须有长宽)，方法中传入jquery容器对象var width=conFrame.width();var height=conFrame.height();console.log('width:'+width+',height:'+height)$('#gycanvas').attr({"width": width,"height": height})//开始画  let x0 = conFrame.offset().left+width/2;let y0 = conFrame.offset().top+height/2;console.log(x0+','+y0)let context = $('#gycanvas')[0].getContext('2d');context.fillStyle = "#F21972";//线条颜色let x, y;let t = -3;let inteWei = setInterval(function() {//外部定时器，为了画心加速，不需要可以删除let inte = setInterval(function() {//内部定时器，为了动态画心if (t <=3) {x = 16 * Math.pow(Math.sin(t), 3);y = 13 * Math.cos(t) - 5 * Math.cos(t * 2) - 2 * Math.cos(t * 3) - Math.cos(t * 4);t = t + 0.002;//点的数量，约大点越少，速度越快x = x *  width/35;y = y *  height/35;console.log(x+','+y)context.fillRect(x +width/2, height/2 - y, 1, 1);//(每个点横坐标,每个点纵坐标,每个点宽度,每个点长度)} else {clearInterval(inte);clearInterval(inteWei);console.log('清除内、外部定时器'+x+','+y)}}, 0);//控制画心速度，数字越小，速度越快}, 0);//控制画心速度，数字越小，速度越快};

jquery/javascript画心爱心方法相关推荐

javascript:jquery.history.js使用方法
javascript:jquery.history.js使用方法 step1:download jquery.history.js step2:create a test page as follow ...
JQuery动态执行javascript代码的方法
在JQUERY中要动态执行从服务器端返回的HTML片断,可用JQUERY中的globalEval方法. 举例如下: var scriptCode='alert("hello")'; ...
利用snowfall.jquery.js实现爱心满屏飞
小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...
jQuery JavaScript库达到新的里程碑
一.什么是JQuery? Jquery是继prototype之后又一个优秀的Javascript框架.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Saf ...
jQuery CSS 操作 - css() 方法
实例设置 <p> 元素的颜色: $(".btn1").click(function(){$("p").css("color", ...
Android中WebView加载本地Html，与JavaScript与Android方法相互传值...
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u010046908/article/details/51759125 最近在做项目中,要使用High ...
JQuery 的跨域方法可跨任意网站
JS的跨域问题,很多人在网上找其解决方法,教其用IFRAME去解决的文章很多,真有那么复杂吗?其实很简单的,如果你用JQUERY,一个GETJSON方法就搞定了,而且是一行代码搞定. 下面开始贴出方法 ...
关于使用jQuery时$(document).ready()方法失效问题
关于使用jQuery时$(document).ready()方法失效问题 <script type="text/javascript">//页面加载后自动执行,不需要按 ...
用JQuery中的Ajax方法获取web service等后台程序中的方法
用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...

jquery/javascript画心爱心方法

html代码

js、jquery代码

jquery/javascript画心爱心方法相关推荐

最新文章

热门文章