如何用canvas绘制矩形？canvas画矩形的两种方法介绍
canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。所以，如何用canvas绘制一个矩形呢？接下来这篇文章将给大家来介绍关于canvas画一个矩形的实现方法的内容，若是有需要的话可以看看。
我们需要知道的是在canvas中与矩形相关的方法是rect()，使用 stroke() 或 fill() 方法在画布上实际地绘制矩形。
rect()方法能接收 4 个参数：矩形的 x 坐标、矩形的 y 坐标、矩形宽度和矩形高度。这些参数的单位都是像素。
下面我们就来分别利用strokerect()和fillrect()方法来实现绘制矩形。
首先，我们来看看利用canvas中fillrect()方法绘制的有填充的矩形实例。
fillRect() 方法在画布上绘制的矩形会填充指定的颜色。填充的颜色通过fillStyle 属性指定。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>用canvas画矩形</title>
<style>
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script type="text/javascript">
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext('2d'); //getContext() 方法可返回一个对象
context.fillStyle = "green"; // 设置或返回用于填充绘画的颜色、渐变或模式
context.fillRect(50,50,400,300); // x轴 y轴 宽 和 高 ,绘制“被填充”的矩形
}
draw("canvas");
</script>
</body>
</html>canvas画有填充矩形的效果如下：
然后我们来看一看利用canvas中strokerect()方法绘制的无填充的矩形实例。
strokeRect() 方法在画布上绘制的矩形会使用指定的颜色描边。描边颜色通过strokeStyle 属性指定。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>用canvas画矩形</title>
<style>
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script type="text/javascript">
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext('2d'); //getContext() 方法可返回一个对象
context.strokeStyle = "pink"; //图形边框的填充颜色
context.lineWidth = 5; //用宽度为 5 像素的线条来绘制矩形：
context.strokeRect(50,50,180,120); //绘制矩形（无填充）
context.strokeRect(110,110,180,120);
}
draw("canvas");
</script>
</body>
</html>canvas画无填充矩形的效果如下：
最后本篇文章到这里就结束了，关于canvas更多的相关知识可以参考HTML5开发手册。
Atas ialah kandungan terperinci 如何用canvas绘制矩形？canvas画矩形的两种方法介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1386
52
Apakah luas bulatan dalam segi empat tepat yang ditulis dalam separuh bulatan?
Sep 13, 2023 am 08:45 AM
Bulatan yang ditulis dalam segi empat tepat adalah tangen pada sisi panjang segi empat tepat, iaitu panjangnya tangen dengan bulatan. Segi empat tepat yang ditulis dalam separuh bulatan menyentuh dua titik pada lengkok separuh bulatan itu. Lebar segi empat tepat adalah sama dengan diameter bulatan. Jika R ialah jejari separuh bulatan itu. Panjang segi empat tepat = √2R/2 Lebar segi empat tepat = R/√2 Jejari bulatan tersurat ialah r = b/2 = R/2√2 Dengan menggunakan formula ini kita boleh mengira segi empat tepat yang tertulis dalam separuh bulatan. Luas bulatan, luas = (π*r2)=π*R/8 Contoh Demonstrasi #include<stdio.h>intmain(){&
Apakah pemalam anak panah kanvas?
Aug 21, 2023 pm 02:14 PM
Pemalam anak panah kanvas termasuk: 1. Fabric.js, yang mempunyai API yang ringkas dan mudah digunakan serta boleh mencipta kesan anak panah tersuai 2. Konva.js, yang menyediakan fungsi melukis anak panah dan boleh mencipta pelbagai anak panah gaya; 3. Pixi.js , yang menyediakan fungsi pemprosesan grafik yang kaya dan boleh mencapai pelbagai kesan anak panah; ; 6. Rough .js, anda boleh membuat anak panah yang dilukis dengan tangan, dsb.
Bagaimana untuk menggabungkan grafik selepas segi empat tepat CAD bertaburan
Feb 28, 2024 pm 12:10 PM
Apabila menggunakan perisian CAD, kita sering menghadapi situasi di mana kita perlu menggabungkan semula objek segi empat tepat "berselerak" ke dalam satu grafik. Keperluan ini timbul dalam banyak bidang, seperti perancangan ruang, reka bentuk mekanikal dan lukisan seni bina. Untuk memenuhi permintaan ini, kita perlu memahami dan menguasai beberapa fungsi utama dalam perisian CAD. Seterusnya, editor laman web ini akan memperkenalkan anda secara terperinci bagaimana untuk menyelesaikan tugasan ini dalam persekitaran CAD Pengguna yang mempunyai keraguan boleh datang dan mengikuti artikel ini untuk belajar. Kaedah untuk menggabungkan segi empat tepat CAD ke dalam satu grafik selepas memecahkannya: 1. Buka perisian CAD2023, cipta segi empat tepat, dan kemudian masukkan arahan X dan ruang. Seperti yang ditunjukkan di bawah: 2. Pilih objek segi empat tepat dan jarakkannya. Anda boleh memecahkan objek. 3. Pilih semua baris terbuka
Apakah butiran jam kanvas?
Aug 21, 2023 pm 05:07 PM
Butiran jam kanvas termasuk penampilan jam, tanda semak, jam digital, jam, minit dan jarum kedua, titik tengah, kesan animasi, gaya lain, dsb. Pengenalan terperinci: 1. Penampilan jam, anda boleh menggunakan Kanvas untuk melukis dail bulat sebagai penampilan jam, dan anda boleh menetapkan saiz, warna, jidar dan gaya dail lain. 2. Garisan skala, lukis garisan skala; dail untuk mewakili jam atau minit. 3. Jam digital, anda boleh melukis jam digital pada dail untuk menunjukkan jam dan minit semasa
Apakah versi html2canvas yang ada?
Aug 22, 2023 pm 05:58 PM
Versi html2canvas termasuk html2canvas v0.x, html2canvas v1.x, dsb. Pengenalan terperinci: 1. html2canvas v0.x, yang merupakan versi awal html2canvas Versi stabil terkini ialah v0.5.0-alpha1. Ia adalah versi matang yang telah digunakan secara meluas dan disahkan dalam banyak projek;
Ketahui rangka kerja kanvas dan terangkan rangka kerja kanvas yang biasa digunakan secara terperinci
Jan 17, 2024 am 11:03 AM
Terokai rangka kerja Kanvas: Untuk memahami apakah rangka kerja Kanvas yang biasa digunakan, contoh kod khusus diperlukan Pengenalan: Kanvas ialah API lukisan yang disediakan dalam HTML5, yang melaluinya kita boleh mencapai kesan grafik dan animasi yang kaya. Untuk meningkatkan kecekapan dan kemudahan melukis, banyak pembangun telah membangunkan rangka kerja Kanvas yang berbeza. Artikel ini akan memperkenalkan beberapa rangka kerja Kanvas yang biasa digunakan dan menyediakan contoh kod khusus untuk membantu pembaca memperoleh pemahaman yang lebih mendalam tentang cara menggunakan rangka kerja ini. 1. Rangka kerja EaselJS Ea
Tulis program Java untuk mengira luas dan perimeter segi empat tepat menggunakan konsep kelas
Sep 03, 2023 am 11:37 AM
Bahasa Java adalah salah satu bahasa pengaturcaraan berorientasikan objek yang paling biasa digunakan di dunia hari ini. Konsep kelas adalah salah satu ciri terpenting bahasa berorientasikan objek. Kelas adalah seperti pelan tindakan untuk objek. Sebagai contoh, apabila kita ingin membina rumah, kita mula-mula membuat blueprint rumah, dengan kata lain, kita membuat rancangan yang menunjukkan bagaimana kita akan membina rumah tersebut. Mengikut rancangan ini kita boleh membina banyak rumah. Begitu juga, menggunakan kelas, kita boleh mencipta banyak objek. Kelas ialah cetak biru untuk mencipta banyak objek, dengan objek ialah entiti dunia sebenar seperti kereta, basikal, pen, dsb. Kelas mempunyai ciri-ciri semua objek, dan objek mempunyai nilai ciri-ciri ini. Dalam artikel ini, kami akan menulis program Java untuk mencari perimeter dan muka segi empat tepat menggunakan konsep kelas
uniapp melaksanakan cara menggunakan kanvas untuk melukis carta dan kesan animasi
Oct 18, 2023 am 10:42 AM
Cara menggunakan kanvas untuk melukis carta dan kesan animasi dalam uniapp memerlukan contoh kod khusus 1. Pengenalan Dengan populariti peranti mudah alih, semakin banyak aplikasi perlu memaparkan pelbagai carta dan kesan animasi pada terminal mudah alih. Sebagai rangka kerja pembangunan merentas platform berdasarkan Vue.js, uniapp menyediakan keupayaan untuk menggunakan kanvas untuk melukis carta dan kesan animasi. Artikel ini akan memperkenalkan cara uniapp menggunakan kanvas untuk mencapai kesan carta dan animasi serta memberikan contoh kod khusus. 2. kanvas
