利用HTML5中的Canvas绘制笑脸的代码-Tutorial H5-php.cn

Rumah

hujung hadapan web

Tutorial H5

利用HTML5中的Canvas绘制笑脸的代码

不言

Jul 02, 2018 am 11:21 AM

canvashtml5

这篇文章主要介绍了利用HTML5中的Canvas绘制一张笑脸的教程,使用Canvas进行绘图是HTML5中的基本功能,需要的朋友可以参考下

201557180008373.jpg (600×436) 今天，你将学习一项称为Canvas（画布）的web技术，以及它和文档对象模型（通常被称为DOM）的关联。这项技术非常强大，因为它使web开发人员能够通过使用JavaScript访问和修改HTML元素。

现在你可能想知道为什么我们需要大刀阔斧地使用JavaScript。简而言之，HTML和JavaScript是相互依存的，一些HTML组件，如canvas元素，并不能脱离JavaScript单独使用。毕竟，如果我们不能在上面绘图，那canvas能派什么用处呢？

为了更好地理解这个概念，我们一起通过一个示例项目来尝试画一个简单的笑脸。让我们开始吧。
开始

首先创建一个新目录来保存你的项目文件，然后打开你最喜欢的文本编辑器或web开发工具。一旦你这样做了,你应该创建一个空的index.html和一个空的script.js,之后我们将继续编辑。

201557180130749.jpg (600×415)
接下来，我们来修改index.html文件，这不会涉及很多东西，因为我们项目的大部分代码将用JavaScript编写。我们需要在HTML中做的是创建一个canvas元素和引用script.js，这相当直截了当：

<!DOCTYPE html><body>
   <canvas id=&#39;canvas&#39; width=&#39;640&#39; height=&#39;480&#39;></canvas>
   <script type=&#39;text/javascript&#39; src=&#39;script.js&#39;></script>
</body></html>

这么解释，我使用一组标记f4c4880127ae9dd2e05b78c78da182f8和1d6e7d87652dd104f173dbf7284e2799，这样，我们可以通过body为文档添加更多的元素。抓住这个机会，我完成了一个id属性为canvas的640*480的canvas元素。

这个属性只是简单地为元素加上一个字符串，目的是为了唯一识别，稍后我们将利用这个属性，在JavaScript文件中定位我们的canvas元素。接下来，我们再使用3f1c4e4b6b16bbbd69b2ee476dc4f83a标记引用JavaScript文件，它指定JavaScript的语言类型和script.js文件的路径。
操作DOM

如其名称“文档对象模型”，我们需要通过使用另一种语言，调用接口访问HTML文档，在这里，我们使用的语言是JavaScript。为此，我们需要在内置文档对象上的布置一个简单引用。这个对象直接对应于我们的f4c4880127ae9dd2e05b78c78da182f8标记，类似的，它是整个项目的基础，因为我们可以通过它来获取元素，执行变化。

var canvas = document.getElementById(&#39;canvas&#39;);

还记得我们如何使用id =“canvas”来定义一个canvas元素吗？现在我们使用document.getElementById方法，从HTML文档获取这个元素，我们简单地传递匹配所需元素id的字符串。现在我们已经获取了这个元素，接下来就可以用其进行绘画工作了。

为了使用canvas进行绘画，我们必须操作它的上下文。令人惊讶的是，一个canvas不包含任何绘图的方法或属性，但是它的上下文对象有我们需要的所有方法。一个上下文定义如下所示：

var context = canvas.getContext(&#39;2d&#39;);

每一个canvas有几个不同的上下文，根据程序的目的，只需要一个二维的上下文就足够了，它将获得我们需要创建笑脸的所有绘图方法。

在我们开始之前，我必须告知您，上下文存储了两种颜色属性，一个用于画笔（stroke），一个用于填充（fill）。对于我们的笑脸，需要设置填充为黄色，画笔为黑色。

context.fillStyle = &#39;yellow&#39;;   
context.strokeStyle = &#39;black&#39;;

设置完上下文所需的颜色后，我们必须为脸画一个圆。不幸的是，上下文中没有圆的预定义方法，因此我们需要使用所谓的路径（path）。路径只是一系列的相连的直线和曲线，路径在绘图完成后关闭。

context.beginPath();   
context.arc(320, 240, 200, 0, 2 * Math.PI);   
context.fill();   
context.stroke();   
context.closePath();

这样解释，我们运用上下文开始一个新的路径。接下来，我们在点(320、240)上创建一个半径为200像素的圆弧。最后两个参数指定构建圆弧的初始和最终角度，所以我们传递0和2 *Math.PI，来创建一个完整的圆。最后，我们运用上下文基于我们已经设置的颜色进行填充并画出路径。

尽管关闭路径不是脚本的功能所必须的，但我们还是需要关闭路径，这样就可以开始绘制笑脸中新的眼睛和嘴。眼睛可以通过同样的方式完成,每个眼睛需要较小的半径和不同的位置。但首先我们必须记住设置填充颜色为白色。

context.fillStyle = &#39;white&#39;;   
context.beginPath();   
context.arc(270, 175, 30, 0, 2 * Math.PI);   
context.fill();   
context.stroke();   
context.closePath();   
context.beginPath();   
context.arc(370, 175, 30, 0, 2 * Math.PI);   
context.fill();   
context.stroke();   
context.closePath();

以上是关于眼睛的所有代码。现在嘴巴很相似，但这次我们不会填满圆弧，我们的角度将配置为一个半圆。要做到这一点,我们需要设置起始角度为零和结束角度为-1 * Math.PI。请记住,不要忘记将画笔的颜色设置为红色。

context.fillStyle = &#39;red&#39;;   
context.beginPath();   
context.arc(320, 240, 150, 0, -1 * Math.PI);   
context.fill()   
context.stroke();   
context.closePath();

祝贺

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

js HTML5 canvas绘制图片的方法

HTML5和CSS3实现3D展示商品信息的代码

HTML5 Canvas实现绘制一个像素宽的细线

Atas ialah kandungan terperinci 利用HTML5中的Canvas绘制笑脸的代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

H5: Ciri dan keupayaan baru untuk Pembangunan WebApr 29, 2025 am 12:07 AM

H5 membawa beberapa fungsi dan keupayaan baru, meningkatkan kecekapan interaktiviti dan pembangunan laman web. 1. Tag semantik seperti meningkatkan SEO. 2. Sokongan multimedia memudahkan main balik audio dan video melalui dan tag. 3. Lukisan kanvas menyediakan alat lukisan grafik dinamik. 4. Penyimpanan Tempatan Memudahkan Penyimpanan Data melalui LocalStorage dan sessionStorage. 5. API Geolokasi memudahkan pembangunan perkhidmatan berasaskan lokasi.

H5: Penambahbaikan utama dalam HTML5Apr 28, 2025 am 12:26 AM

HTML5 membawa lima penambahbaikan utama: 1. Tag semantik meningkatkan kejelasan kod dan kesan SEO; 2. Sokongan multimedia memudahkan penyembuhan video dan audio; 3. Peningkatan Borang Memudahkan Pengesahan; 4. Offline dan storan tempatan meningkatkan pengalaman pengguna; 5. Fungsi kanvas dan grafik meningkatkan visualisasi laman web.

HTML5: Standard dan kesannya terhadap pembangunan webApr 27, 2025 am 12:12 AM

Ciri -ciri teras HTML5 termasuk tag semantik, sokongan multimedia, penyimpanan luar talian dan penyimpanan tempatan, dan peningkatan bentuk. 1. Tag semantik seperti, dan lain -lain untuk meningkatkan kebolehbacaan kod dan kesan SEO. 2. Memudahkan penanaman multimedia dengan label. 3. Storan luar talian dan penyimpanan tempatan seperti ApplicationCache dan LocalStorage Sokongan Operasi Bebas Rangkaian dan Penyimpanan Data. 4. Peningkatan Borang Memperkenalkan Jenis Input dan Sifat Pengesahan Baru Untuk Memudahkan Pemprosesan dan Pengesahan.

Contoh Kod H5: Aplikasi Praktikal dan TutorialApr 25, 2025 am 12:10 AM

H5 menyediakan pelbagai ciri dan fungsi baru, sangat meningkatkan keupayaan pembangunan front-end. 1. Sokongan Multimedia: Media Media Melalui dan Elemen, Tiada Plug-Ins diperlukan. 2. Kanvas: Gunakan elemen untuk menjadikan grafik dan animasi 2D secara dinamik. 3. Penyimpanan Tempatan: Melaksanakan penyimpanan data berterusan melalui LocalStorage dan sessionStorage untuk meningkatkan pengalaman pengguna.

Sambungan antara H5 dan HTML5: Persamaan dan PerbezaanApr 24, 2025 am 12:01 AM

H5 dan HTML5 adalah konsep yang berbeza: HTML5 adalah versi HTML, yang mengandungi unsur -unsur baru dan API; H5 adalah rangka kerja pembangunan aplikasi mudah alih berdasarkan HTML5. HTML5 Parses dan membuat kod melalui pelayar, manakala aplikasi H5 perlu menjalankan bekas dan berinteraksi dengan kod asli melalui JavaScript.

Blok bangunan kod H5: elemen utama dan tujuan merekaApr 23, 2025 am 12:09 AM

Unsur -unsur utama HTML5 termasuk ,,,,,, dan lain -lain, yang digunakan untuk membina laman web moden. 1. Tentukan kandungan kepala, 2.

HTML5 dan H5: Memahami Penggunaan BiasaApr 22, 2025 am 12:01 AM

Tidak ada perbezaan antara HTML5 dan H5, iaitu singkatan HTML5. 1.HTML5 adalah versi kelima HTML, yang meningkatkan fungsi multimedia dan interaktif laman web. 2.H5 sering digunakan untuk merujuk kepada laman web atau aplikasi mudah alih berasaskan HTML5, dan sesuai untuk pelbagai peranti mudah alih.

HTML5: Blok Bangunan Web Moden (H5)Apr 21, 2025 am 12:05 AM

HTML5 adalah versi terkini bahasa markup hiperteks, yang diseragamkan oleh W3C. HTML5 memperkenalkan tag semantik baru, sokongan multimedia dan peningkatan bentuk, meningkatkan struktur web, pengalaman pengguna dan kesan SEO. HTML5 memperkenalkan tag semantik baru, seperti,, dan lain -lain, untuk menjadikan struktur laman web lebih jelas dan kesan SEO lebih baik. HTML5 menyokong elemen multimedia dan tiada pemalam pihak ketiga diperlukan, meningkatkan pengalaman pengguna dan kelajuan memuatkan. HTML5 meningkatkan fungsi bentuk dan memperkenalkan jenis input baru seperti, dan lain -lain, yang meningkatkan pengalaman pengguna dan membentuk kecekapan pengesahan.

See all articles