溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

HTML5 Canvas如何實(shí)現(xiàn)玫瑰曲線和心形圖案

發(fā)布時(shí)間：2022-03-08 10:12:36 來源：億速云 閱讀：206 作者：小新 欄目：web開發(fā)

這篇文章主要介紹HTML5 Canvas如何實(shí)現(xiàn)玫瑰曲線和心形圖案，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

提示：把代碼復(fù)制到一個(gè)html文件中并保存，直接打開即可看到效果。

實(shí)現(xiàn)代碼：

<！DOCTYPE html>

<html>

<head>

<meta charset =“ gbk”>

<title> HTML5演示</ title>

<style type =“ text / css”>

＃apDiv1 {

position：absolute;

寬度：120像素；

高度：300像素；

z-index：1;

左：840px；

頂部：80px；

}

</ style>

</ head>

<body>

<canvas id =“ canvas” width =“ 800” height =“ 600” style =“ border：1px solid＃c3c3c3;”>

您的瀏覽器不支持canvas元素。</ canvas>

<div id =“ apDiv1”>

<form>

函數(shù)draw（）{ var ctx = document.getElementById（'canvas'）。getContext（'2d'）; ctx.save（）; ctx.translate（400,300）; ctx.clearRect（-400，-300,800,600）; ctx.strokeStyle =“＃cc0000”;

var a = 0，b = 1，m = 6，n = 1；

m = document.forms [0] .m.value;

n = document.forms [0] .n.value;

a = document.forms [0] .a.value;

b = document.forms [0] .b.value;

drawRose（ctx，a，b，m，n）;

ctx.restore（）;

}

函數(shù)drawRose（ctx，a，b，m，n）{

ctx.beginPath（）;

var e = 0，c = 120；

var k = 2 * Math.PI / 360;

做{

var r = a / b + Math.sin（m * e / n * k）;

r = r * c;

var x = r * Math.cos（e * k）;

var y = r * Math.sin（e * k）;

e + = 0.1;

ctx.lineTo（x，y）;

} while（e <= 4320）;

ctx.stroke（）;

}

函數(shù)draw2（）{

var ctx = document.getElementById（'canvas'）。getContext（'2d'）;

ctx.save（）;

ctx.translate（400,300）;

ctx.clearRect（-400，-300,800,600）;

ctx.strokeStyle =“＃cc0000”;

ctx.beginPath（）; //ctx.moveTo(0,0）;

var e = 0，c = 150；

var k = 2 * Math.PI / 360;

做{

x = 150 * Math.cos（5/2 * e * k）+ 50 * Math.cos（15/16 * 5/2 * e * k）;

y = 150 * Math.sin（5/2 * e * k）-50 * Math.sin（15/16 * 5/2 * e * k）;

e + = 0.1;

ctx.lineTo（x，y）;

} while（e <= 3600）;

ctx.stroke（）;

ctx.restore（）;

}

函數(shù)draw3（）{

var ctx = document.getElementById（'canvas'）。getContext（'2d'）;

ctx。

ctx.translate（400,300）;

ctx.clearRect（-400，-300,800,600）;

ctx.strokeStyle =“＃ff0000”;

ctx.beginPath（）;

var x = 1，y;

做{

y = -80 *（Math.sqrt（1-x * x）+ Math.pow（x * x，1/3））;

x-= 0.001；

ctx.lineTo（100 * x，y）;

} while（x> = -1）;

做{

y = 80 *（Math.sqrt（1-x * x）-Math.pow（x * x，1/3））;

x + ＝ 0.001；

ctx.lineTo（100 * x，y）;

} while（x <= 1）;

ctx.closePath（）;

var grad = ctx.createRadialGradient（-40，-60,10，-40，-40,200）;

grad.addColorStop（0，“＃ffcc00”）;

grad.addColorStop（1，“＃ff0000”）;

ctx.fillStyle = grad;

ctx.fill（）;

// ctx.stroke（）;

ctx.restore（）;

}

window.onload = function（）{

draw（）;

}

</ script>

</ body>

</ html>

以上是“HTML5 Canvas如何實(shí)現(xiàn)玫瑰曲線和心形圖案”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手