Canvas开发前的JavaScript准备（二）

最新推荐文章于 2024-10-12 09:26:17 发布

原创最新推荐文章于 2024-10-12 09:26:17 发布 · 915 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #alert #2D渲染上下文API #jquery-3.3.1.min.js

HTML5之Canvas高速入门同时被 2 个专栏收录

14 篇文章

订阅专栏

HTML5之Canvas高速入门

14 篇文章

订阅专栏

本文介绍如何使用JavaScript与Canvas进行绘图，重点讲解了通过调用2D渲染上下文API实现绘画的方法，并提供了引入jQuery库的具体步骤，以实现页面加载完成后的弹窗效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

何为JavaScript？这里不会详细介绍，因为这也是一门很有学问东西，这里主要讲Canvas，你只要知道它是一种脚本执行语言就可以了，浏览器解释就可以运行，那我们为什么要用他呢？因为Canvas只是个页面标签，Canves的绘画并不是在Canves上执行的，而是在一个叫2D渲染上下文API上执行的，这个API接口就在JavaScript中，相当于我们只要调用封装好的函数接口，传递需要的参数就会在Canves显示出绘画。

那如何调入这个API呢？其实别人都帮我们封装好了。我们只需引用代码文件就ok了。

1、搜索jQuery下载，进入官网，或者任何地方，下载下图中任何一个，建议使用带min的，这是压缩文件，相对空间小一点，下载文件jquery-3.3.1.min.js

2、将上面的文件放入与你建立的网页的同个文件下；

3、在WebStorm中，编辑JavaScript引入代码；并写一个加载页面完成时弹窗的动作；

<!DOCTYPE html>     <!-- 告诉浏览器我们使用的HTML模板为HTML5 -->
<html lang="en">    <!-- 网页页面的根，其他元素均放在其中，只能有一个 -->
<head> <!--页面所有meta元素均包含在这里 -->
  <meta charset="UTF-8">    <!-- 编码方式  -->
  <title>Canves高速入门</title>   <!-- 页面设置名称，显示在浏览器标题栏中 -->
  <!-- CSS 及 javascript 代码放置处 -->
  <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <!-- 引用jQuery库-->
  <script type="text/javascript">
    $(document).ready(function(){
      alert("HELLO WORLD!!!")
    });                  <!-- 引用jQuery库弹出 Hello world 操作-->
  </script>
</head>
<body>  <!-- 页面的主题内容均在这里 -->
<div>HTML5之Canves高速入门</div> <!-- 页面的元素摆放 -->
</body>
</html>