|
|
效果如图片[滑稽][大拇指]<!DOCTYPE html><html><head> <title>黑客帝国效果</title></head> <body><canvas id="drawing"></canvas><canvas id="drawing1"></canvas><img id="flower"></img><script type="text/javascript">draw();draw1();function draw1(){ var drawing = document.getElementById("drawing1"); //pic = document.getElementById('flower'); //获取描边图片 var pic = new Image(); pic.src ="微信图片_20201203160109.png"; drawing.width = '600'; drawing.height = '500'; if (drawing.getContext){ var content = drawing.getContext("2d"), radian = 0, radian_add = Math.PI/40; content.translate(250,250); function heart(){ X = getX1(radian); Y = getY1(radian); content.drawImage(pic,X,Y,25,25); //在给定坐标绘制给定大小的图片 radian+=radian_add; if (radian > (2*Math.PI)){ //绘制完整的心型线后取消间歇调用 clearInterval(intervalId); } } intervalId = setInterval(heart,100); //设置间歇调用，间隔为100ms }}function draw(){ var drawing = document.getElementById("drawing"); //获取canvas元素 drawing.width = '500'; //设置画布大小 drawing.height = '500'; if (drawing.getContext){ //获取绘图上下文 var content = drawing.getContext("2d"), radian = 0, //设置初始弧度 radian_add = Math.PI/180; //设置弧度增量 content.beginPath(); //开始绘图 content.translate(250,250); //设置绘图原点 content.moveTo(getX(radian),getY(radian)); //移动绘图游标至原点 while(radian <= (Math.PI*2)){ //每增加一次弧度，绘制一条线 radian += radian_add; X = getX(radian); Y = getY(radian); content.lineTo(X,Y); } content.strokeStyle = "red"; //设置描边样式 content.stroke(); //对路径描边 }}function getX(t){ //获取玫瑰线的X坐标 return 100 * Math.sin(4*t)*Math.cos(t);}function getY(t){ //获取玫瑰线的Y坐标 return 100 * Math.sin(4*t)*Math.sin(t);}function getX1(t){ //获取心型线的X坐标 return 15*(16*Math.pow(Math.sin(t),3))}还有半部分放在评论区了[滑稽][玫瑰][玫瑰] 复制粘贴就ok了
 |
|
发表于 2022-5-8 15:26:59
