【初学Javascript并在画布上绘图】
初学js的有关知识
- 1.Javascript是一种什么语言？
- 2. JavaScript由那几部分组成？
-
- (1)ECMAScript
- (2)DOM
- (3)BOM
- 3.页面中引入JavaScript的三种方式
-
- (1)行内式
- (2)页面嵌入式
- (3)外部链接式
- 4.document文档对象
- 5.画布绘图有关知识
-
- (1)创建画布
- (2)获取画布
- (3)准备画笔
- (4)绘制图形
- 6.绘制线条
-
- (1)绘制线的方法
- (2)线的样式
- (3)线的路径
1.Javascript是一种什么语言？
JavaScript：是一个脚本语言(嵌入页面中,通过浏览器解析运行)
2. JavaScript由那几部分组成？
(1)ECMAScript
ECMAScript：是Javascript的核心，主要规定JavaScript的基本语法。所有的浏览器厂商 都会遵循这个语法(标准)。
(2)DOM
DOM：文档对象模型(Document Object Model)，是W3c组织提供的编程接口。用户可以通过 DOM的接口去操作页面中的元素。
(3)BOM
BOM：浏览器对象模型(Browser Object Model),独立于内容,可以和浏览器进行交互的对象结构， 通过BOM可以直接对浏览器窗口进行操作。
3.页面中引入JavaScript的三种方式
(1)行内式
行内式：写在标签的属性中
①代码段展示：
<body>
<a href="javascript:alert('网络信号差'）">百度a>
body>
②页面展示：
(2)页面嵌入式
页面嵌入式：通过标签在页面中嵌入js代码
①代码段展示：
<body>
<button onclick="fun()">登录button>
<script type="text/javascript">/*由javascript构成的文本，此type属性一般加上，防止有些浏览器无法识别*/
function fun(){
alert('登录失败')
}
script>
body>
②页面展示：
(3)外部链接式
a、创建独立js文件：.js
b、在页面中使用标签将外部的.js文件链接进来
外链式的优势
1)利于后期修改和维护
2)减轻文件体积、加快页面加
载速度
①代码段展示：
html:
<head>
<script src="../js/003.js">script>
head>
<body>
<button onclick="fun()">登录button>
<p id="pt" >西安邮电大学p>
body>
js:
function fun(){
// alert('登录失败')
var p1=document.getElementById('pt') //获取id属性值为pt的元素
var str=p1.innerHTML//innerHTML代表标签中的内容（即起始标签与结束标签中的内容）
alert(str)
}
②页面展示：
4.document文档对象
一个页面就是一个document，通过该对象可以获取页面中的任何元素
通过标签的id属性来获取标签：getElementById(id属性值)
5.画布绘图有关知识
页面中用于绘图的特殊区域
(1)创建画布
< canvas id=“画布名称” width=“宽度” height=“高度”>
(2)获取画布
要想在JavaScript中控制画布，首先要获取画布。使用getElementByld0方法可以获取网页中的画布对象。
基本语法格式：var cas = document.getElementById(‘画布名称’)
(3)准备画笔
有了画布之后,要开始绘图,还需要准备一只画笔，这支画笔就是context对象。context对象也被称为绘制环境，通过该对象，可以在画布中绘制图形。
基本语法格式：var pen = cas.getContext(‘2d’);
(4)绘制图形
6.绘制线条
- 一条最简单的线由三部分组成，分别为初始位置、连线端点以及描边。
- 在平面中(2d),初始位置可以通过"x, y"的坐标轴来表示。在画布中从最左上角"0，0”开始, x轴向右增大，y轴向下增大。
(1)绘制线的方法
①初始位置
在绘制图形时，我们首先需要确定从哪里下”笔”, 这个下"笔”的位置就是初始位
置。
var cas = document.getElementByld(‘cas’);
var context = cas.getContext(2d’);
context.moveTo(100, 100);
②连线端点
连线端点用于定义一个端点, 并绘制-条从该端点到初始位置的连线。在画布中使用
lineTo(x,y)方法来定义连线端点。
基本语法格式
context.lineTo(100,100);
③描边
通过初始位置和连线端点可以绘制一条线，但这条线并不能被看到。这时我们需要为线添加描边，让线变得可见。使用画布中的stroke()方法， 可以实现线的可视效果。
基本语法格式
context.stroke();
(2)线的样式
①宽度
使用画布中的IineWidth属性可以定义线的宽度，该属性的取值为数值(不带单位) ,
以像素为计量。
基本语法格式
context.lineWidth=‘10’;
②描边颜色
使用画布中的trokestyle属性可以定义线的描边颜色，该属性的取值为十六进制颜色值或颜色英文。
context.strokeStyle=#oo’;
context.strokeStyle='red";
③端点形状
默认情况下，线的端点是方形的，通过画布中的lineCap属性可以改变端点的形状。
基本语法格式
lineCap=‘属性值’
| 属性值 | 显示效果 |
|---|---|
| butt(默认值） | 默认效果，无端点，显示直线方形边缘 |
| round | 显示圆形端点 |
| square | 显示方形端点 |
样式如下：
(3)线的路径
①重置路径
在同-画布中，我们添加再多的连线端点也只能有一条路径, 如果想要开始新的路
径,就需要使用beginPath0方法，当出现beginPath(即表示路径重新开始）。
②闭合路径
闭合路径就是将我们绘制的开放路径，进行封闭处理，多点的路径闭合后会形成特定的形状。在画布中，使用closePath0方法闭合路径。
③填充路径
使用画布中的fill(方法填充图形。
④绘制圆
在画布中，使用arc()方法可以绘制圆或弧线。
基本语法格式
arc(x,y,r,开始角，结束角，方向)
详细解释说明一下：
- x和y: x和y表示圆心在x轴和y轴的坐标位置。
- r:示圆形或弧形的半径,用于确定图形的大小。
- 开始角:表示初始弧点位置。其中弧点使用数值和"Math.PI”(圆周率， 可以理解为180度)表示。
- 结束角:结束的弧点位置，初始角的设置方式一致。
- 方向:分为顺时针和逆时针绘。
示例1：
① 代码段如下：
<body>
<canvas id="cans" width="300" height="300">你的浏览器不支持canvas标签canvas>
<script>
//1.获取画布
var cans=document.getElementById('cans')
//2.获取画笔
var context =cans.getContext('2d')
//3.设置开始路径
context.beginPath()
//4.设置起始点
context.moveTo(30,100)
//5.定义连接的端点
context.lineWidth='15' //设置线条宽度
context.lineTo(150,100)
//6.描边
context.strokeStyle='red'//设置线条颜色
context.stroke()
script>
body>
②页面展示：
示例2：
①代码段展示：
<script>
//1.获取画布
var canvas = document.getElementById('cans')
//2.获取画笔（配置画布的上下文环境）
var context = canvas.getContext('2d')
//3.设置起点
context.moveTo(20,100)
//4.设置线条的宽度
context.lineWidth='15'
context.lineCap='round'//设置端点形状
//5.定义连接的端点
context.lineTo(200,100)
//6.设置线条颜色
context.strokeStyle='red'
//7.描边
context.stroke()
script>
②页面展示：
示例3：
①代码段如下：
<body>
<canvas id="cans" width="600" height="600">你的浏览器不支持canvas标签canvas>
<script>
var canvas=document.getElementById('cans')
var context=canvas.getContext('2d')
context.moveTo(100,100)//设置起始点
context.lineTo(100,200)//设置端点
context.lineTo(200,200)//设置端点
context.closePath()//关闭路径
//context.stroke()描边
context.fill()//路径填充
script>
body>
②页面展示：
示例4：
①代码段展示：
<body>
<canvas id="cans" width="600" height="600">你的浏览器不支持canvas标签canvas>
<script>
var canvas =document.getElementById('cans')//获取画布
var ctx=canvas.getContext('2d')//获取画笔
ctx.beginPath()//重置路径
//ctx.arc(100,100,80,0,0.5*Math.PI,false)绘制圆，一二个值表示圆心，
//第三个值表示半径，第四个是起始位置，第五个值表示结束角。
//true表示逆时针画四分之一圆弧，false表示顺时针画四分之一圆弧
ctx.arc(100,100,80,0,1*Math.PI,false)//表示顺时针画下圆弧
ctx.closePath() //闭合路径
ctx.stroke()//描边
script>
body>
②页面展示：
示例5：（笑脸绘制）
①代码段展示：
<body>
<canvas id="cans" width="600" height="600">你的浏览器不支持canvas标签canvas>
<script>
var canvas =document.getElementById('cans')//获取画布
var ctx=canvas.getContext('2d')//获取画笔
//画脸
ctx.beginPath()//重置路径
ctx.arc(100,100,80,0,2*Math.PI,true)
ctx.closePath() //闭合路径
ctx.fillStyle='green'//设置填充颜色
ctx.fill()//进行路径填充
//绘制嘴巴
ctx.beginPath()
ctx.strokeStyle='#fff'//设置描边（线条）的颜色
ctx.lineWidth='5'
ctx.arc(100,120,25,0,1*Math.PI,false)
ctx.stroke()//描边就行，不用闭合路径
//绘制左眼
ctx.beginPath()//重置路径
ctx.strokeStyle="#fff"//画笔颜色
ctx.lineWidth='5'//画笔宽度
ctx.arc(70,80,20,0,1*Math.PI,true)
ctx.stroke()//描边就行，不用闭合路径
//绘制右眼
ctx.beginPath()//重置路径
ctx.strokeStyle="#fff"//画笔颜色
ctx.lineWidth='5'//画笔颜色
ctx.arc(130,80,20,0,1*Math.PI,true)
ctx.stroke()//描边就行，不用闭合路径
script>
②页面展示：
示例6：（火柴人绘制）
①代码段展示：
<body>
<canvas id="cas" width="800" height="600">你的浏览器不支持canvas标签canvas>
<script>
var context = document.getElementById('cas').getContext('2d');
//1.绘制头部
context.arc(400,100,30,0,2*Math.PI);
context.fillStyle='#ccc'
context.fill()
context.lineWidth='5'
context.stroke()
//2.绘制脖子
context.beginPath()
context.moveTo(400,130)
context.lineTo(400,140)
context.lineWidth='5'
context.stroke()
//3.绘制躯干
context.beginPath()
context.moveTo(400,140)
context.lineTo(400,260)
context.lineWidth='25'
context.stroke()
//4.绘制红色公文包
context.beginPath()
context.moveTo(360,200)
context.lineTo(440,200)
context.lineTo(440,250)
context.lineTo(360,250)
context.closePath()
context.fillStyle='red'
context.fill()
context.lineWidth='2'
context.stroke()
//5.绘制手臂
context.beginPath()
context.moveTo(400,140)
context.lineTo(440,200)
context.lineTo(400,240)
context.lineWidth='10'
context.stroke()
//5.1 绘制手掌
context.beginPath();
context.arc(400,240,10,0,2*Math.PI);
context.fillStyle = '#000';
context.fill();
//6.绘制腿部
context.beginPath()
context.moveTo(380,400)
context.lineTo(400,260)
context.moveTo(420,400)
context.lineTo(400,240);
context.lineWidth='10';
context.stroke()
//7.绘制前脚
context.beginPath()
context.arc(365,400,15,0,1*Math.PI,true)
context.closePath()
context.lineWidth='5';
context.stroke()
//8.绘制后脚
context.beginPath()
context.arc(405,400,15,0,1*Math.PI,true)
context.closePath()
context.lineWidth='5';
context.stroke()
script>
body>
②页面展示：
