Contoh dalam artikel ini menerangkan cara melukis kawasan kecerunan menggunakan kanvas html5 JavaScript. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:
Tangkapan skrin kesan berjalan adalah seperti berikut:
Kod khusus adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<style type="text/css">
#canvas {
border:3px solid gray;
}
</style>
</head>
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.rect(0, 0, 200, 200);
ctx.closePath();
var gradient = ctx.createLinearGradient(0, 0, 200, 200);
gradient.addColorStop(0, "gray");
gradient.addColorStop(0.5, "red");
gradient.addColorStop(1, "blue");
ctx.fillStyle = gradient;
ctx.fill();
</script>
</html>
Pembaca yang berminat dengan lebih banyak kandungan yang berkaitan dengan kesan khas js boleh menyemak topik khas tapak ini: "Ringkasan animasi jQuery dan penggunaan kesan khas" dan "Ringkasan klasik biasa kesan khas jQuery"
Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan JavaScript.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
