简单的JavaScript和HTML5画布_jss获取画布context对象-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_62343228/article/details/121125446

这篇博客介绍了JavaScript的基本概念和应用场景，包括脚本语言、应用效果、变量和document对象。接着，深入讲解了HTML5画布的使用，涵盖画布的创建、获取、画直线、线的样式和填充等关键知识点。

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

第一部分、简单的JavaScript

1.脚本语言

在设计之初，JavaScript是一种可以嵌入到网页中的脚本语言，它的主要作用是在Web上创建网页特效。使用JavaScript脚本语言实现的动态应用，在网页上随处可见。

2.应用效果

（1）验证用户输入的内容

在这里插入图片描述

（2）网页动态效果

在这里插入图片描述

（3）窗口的应用

在这里插入图片描述

（4）文字特效

在这里插入图片描述

3.JavaScript的引入

（1）行内嵌入式

行内式是将JavaScript代码作为HTML标签的属性值使用。

<a href="Javascript:alert('欢迎来到西邮')">西安邮电大学</a>

alert()：是一个函数,作用是弹出一个消息提示框

<button οnclick="alert('欢迎来到湘潭大学')">湘潭大学</button>

onclick：表示当用户点击按钮时

（2）页面嵌入式

在HTML中运用<script>标签及其相关属性可以嵌入JavaScript脚本代码。

<head>
<script type="text/javascript">
     // 此处为JavaScript代码
</script>
</head>

（3）外部链接式（推荐使用）

外链式是将所有的JavaScript代码放在一个或多个以.js为扩展名的外部JavaScript文件中，通过<src >标签将这些JavaScript文件链接到HTML文档中。

<script type="text/Javascript" src="脚本文件路径" ></script>

外部链接式的优势：

利于后期的修改和维护。
减轻文件体积，加快页面加载速度。

4.变量

在程序运行期间，随时可能产生一些临时数据，应用程序会将这些数据保存在一些内存单元中。变量就是指程序中一个已经命名的存储单元，它的主要作用就是为数据操作提供存放信息的容器。

（1）变量的命名规则

必须以字母或下划线开头，中间可以是数字、字母或者下划线。
变量名不能包含空格、加、减等符号。
不能使用JavaScript中的关键字作为变量名，如var int。
JavaScript的变量名严格区分大小写，如UserName与username代表两个不同的变量。

（2）变量的声明

所有的JavaScript变量都由关键字var声明。

var 变量名;

（3）变量声明要遵守的规则

可以使用一个关键字var同时声明多个变量。

var a,b,c           //同时声明a、b和c三个变量

可以在声明变量的同时对其赋值，即初始化。

var a=1,b=2,c=3；  //同时声明a、b和c三个变量，并分别对其进行初始化

var语句可以用作for循环和for/in循
环的一部分。

for(var i=0;i<10;i++){
}

使用var语句多次声明同一个变量，
就相当于对变量的重新赋值。

5.document对象

如果我们想要在JavaScript中操作某个标签，首先要获取该标签的属性。在JavaScript中通过document对象及其方法可以获取标签属性，如id、name和class等属性。

方法	说明
document.getElementById()	返回对拥有指定id名的第一个对象的引用（简单理解为获取指定id名的标签）
document.getElementsByName()	返回带有指定name属性名的对象集合（简单理解为获取指定name名的标签）
document.getElementsByTagName()	返回带有指定标签名的对象集合（简单理解为获取标签名）
document.getElementsByClassName()	返回带有指定类名的对象集合（简单理解为获取指定class名的标签）

第二部分、HTML5画布

1.认识画布

在网页中，我们把用于绘制图形的特殊区域称为“画布”，网页设计师可以在该区域义绘制自定的图形样式。

2.创建画布

<canvas id="画布名称" width="数值" height="数值">
</canvas>

3.获取画布

要想在JavaScript中控制画布，首先要获取画布。使用getElementById()方法可以获取网页中的画布对象。

var canvas = document.getElementById('cavs');

4.获取画笔

有了画布之后，要开始绘图，还需要准备一只画笔，这支画笔就是context对象。context对象也被称为绘制环境，通过该对象，可以在画布中绘制图形。

canvas.getContext('2d');

在JavaScript中，我们通常会定义一个变量来保存获取的context对象。

var context = canvas.getContext('2d');

5.画直线

（1）确定初识位置

在绘制图形时，我们首先需要确定从哪里下“笔”，这个下“笔”的位置就是初始位置。
在这里插入图片描述

var cas = document.getElementById('cas');
var context = cas.getContext('2d');
context.moveTo(100,100);

（2）连接端点

连线端点用于定义一个端点，并绘制一条从该端点到初始位置的连线。在画布中使用lineTo(x,y)方法来定义连线端点。

context。lineTo(100,100);

（3）描边

通过初始位置和连线端点可以绘制一条线，但这条线并不能被看到。这时我们需要为线添加描边，让线变得可见。使用画布中的stroke()方法，可以实现线的可视效果。

context.stroke();

6.线的样式

（1）宽度

使用画布中的lineWidth属性可以定义线的宽度，该属性的取值为数值（不带单位），以像素为计量。

context.lineWidth='10';

（2）描边的颜色

使用画布中的strokeStyle属性可以定义线的描边颜色，该属性的取值为十六进制颜色值或颜色英文。

context.strokeStyle=’#f00’;
context.strokeStyle=‘red’;

（3）端点的形状

默认情况下，线的端点是方形的，通过画布中的lineCap属性可以改变端点的形状。
在这里插入图片描述

7.线的路径

（1）重置路径

在同一画布中，我们添加再多的连线端点也只能有一条路径，如果想要开始新的路径，就需要使用beginPath()方法，当出现beginPath()即表示路径重新开始。

（2）闭合路径

闭合路径就是将我们绘制的开放路径，进行封闭处理，多点的路径闭合后会形成特定的形状。在画布中，使用closePath()方法闭合路径。

8.填充路径

使用画布中的fill()方法填充图形。

fill();              //填充图形
fillStyle="颜色"     //设置填充色

绘制圆

在画布中，使用arc()方法可以绘制圆或弧线。

在这里插入图片描述