一、JavaScript的组成

二、JavaScript的使用

1.页面中引入JavaScript

(1)行内式：写在标签的属性中

(2)页面嵌入式：通过标签在页面中嵌入js代码

(3)外部链接式--推荐

2.document

三、HTML5的绘图

1.创建画布

2.获取画布

3.获取画笔

4.绘制图形

(1)绘制直线

(2)重置路径:beginPath()

(3)关闭路径:closePath()

(4)路径填充：fill()

(5)绘制圆：arc(x,y,r,开始角,结束角,方向)

画布示例

画圆示例

四、JavaScript的开发工具

1.Visual Studio Code(vscode)

2.WebStorm

一、JavaScript的组成

ECMAScript	是Javascript的核心，主要规定JavaScript的基本语法。所有的浏览器厂商都会遵循这个语法(标准)
DOM	文档对象模型(Document Object Model)，是W3c组织提供的编程接口。用户可以通过DOM的接口去操作页面中的元素
BOM	浏览器对象模型(Browser Object Model),独立于内容,可以和浏览器进行交互的对象结构通过BOM可以直接对浏览器窗口进行操作

二、JavaScript的使用

JavaScript：是一个脚本语言(嵌入页面中,通过浏览器解析运行)

1.页面中引入JavaScript

(1)行内式：写在标签的属性中

(2)页面嵌入式：通过<script></script>标签在页面中嵌入js代码

<script type="text/javascript">   js代码</script>

(3)外部链接式--推荐

a.创建独立js文件：.js
b.在页面中使用<script src="js文件名"></script>标签将外部的.js文件链接进来

2.document

文档对象，一个页面就是一个document，通过该对象可以获取页面中的任何元素

通过标签的id属性来获取标签：getElementById(id属性值)

三、HTML5的绘图

1.创建画布

<canvas id="画布名称" width="宽度" height="高度"></canvas>

2.获取画布

var canvas = document.getElementById('画布名称')

3.获取画笔

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

4.绘制图形

(1)绘制直线

context.moveTo(x,y)	设置起始点
context.lineWidth = '宽度'	设置线条的宽度
context.lineCap = '属性值'	设置端点的形状,butt(默认值)、round(圆形)、square(方形)
context.lineTo(x,y)	设置端点
context.strokeStyle='颜色值'	设置线条的样式
context.stroke()	描边

(2)重置路径:beginPath()

(3)关闭路径:closePath()

(4)路径填充：fill()

(5)绘制圆：arc(x,y,r,开始角,结束角,方向)

方向取值：true(逆时针)、false(顺时针)

画布示例

    <canvas id="cans" width="300" height="300">您的浏览器暂不支持canvas标签</canvas><script>// 1.获取画布var cans = document.getElementById('cans');// 2.获取画笔（配置画布上下文环境）var context = cans.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>

画圆示例

    <canvas id="cans" width="600" height="600">您的浏览器不支持画布</canvas><script>var canvas = document.getElementById('cans')var ctx = canvas.getContext('2d')ctx.beginPath()ctx.arc(100,100,80,0,1*Math.PI,false)//顺时针画下半圆弧ctx.arc(100,100,80,0,1*Math.PI,true)//逆时针画上半圆弧ctx.closePath()ctx.stroke()</script>

四、JavaScript的开发工具

1.Visual Studio Code(vscode)

2.WebStorm

JavaScript基础及画布相关推荐

JavaScript基础一
1.1 javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) J ...
002 - new javascript 基础
002 - new javascript 基础 ####★技巧★ JS 引入返回从哪来到哪去 <script src="javascript:history.go(-1)" ...
HTML5学习笔记 —— JavaScript基础知识
HTML5学习笔记 -- JavaScript基础知识标签: html5javascriptweb前端 2017-05-11 21:51 883人阅读评论(0) 收藏举报分类: JavaScr ...
Android游戏开发基础part2--Canvas画布
游戏开发基础part2--Canvas画布又过了一周才继续做总结,四级结束了,应该可以多点时间学习游戏编程了. Canvas画布类是一个在游戏当中担当非常重要的角色,它可以绘制出不同的图形和图片,可 ...
JavaScript基础笔记集合（转）
JavaScript基础笔记集合 JavaScript基础笔记集合 js简介 js是脚本语言.浏览器是逐行的读取代码,而传统编程会在执行前进行编译 js存放的位置 html脚本必须放在< ...
javascript基础语法——表达式
前面的话一般地,关于javascript基础语法,人们听得比较多的术语是操作符和语句.但是,其实还有一个术语经常使用,却很少被提到,这就是javascript表达式(expression).本文将详 ...
Javascript基础与面向对象基础~第四讲 Javascript中的类对象
今天来说JS中如何实现类(class),事实上本应该昨天晚上写的,可我失言了,在些说一声"抱歉"!JS中的类是JS面向对象的基础,也是我最拿手的东西,你写的代码能否提高一个层次,一 ...
javascript基础系列(入门前须知)
-----------------------小历史---------------------------- javascript与java是两种语言,他们的创作公司不同,JavaScript当时是借 ...
JavaScript基础系列---闭包及其应用
闭包(closure)是JavaScript中一个"神秘"的概念,许多人都对它难以理解,我也一直处于似懂非懂的状态,前几天深入了解了一下执行环境以及作用域链,可戳查看详情,而闭包与 ...
夯实JavaScript基础之prototype, __proto__, instanceof
function New(f){return function(){var o = {'__proto__': f.prototype};f.apply(o, arguments);return o; ...

JavaScript基础及画布

一、JavaScript的组成

二、JavaScript的使用

1.页面中引入JavaScript

(1)行内式：写在标签的属性中

(2)页面嵌入式：通过<script></script>标签在页面中嵌入js代码

(3)外部链接式--推荐

2.document

三、HTML5的绘图

1.创建画布

2.获取画布

3.获取画笔

4.绘制图形

(1)绘制直线

(2)重置路径:beginPath()

(3)关闭路径:closePath()

(4)路径填充：fill()

(5)绘制圆：arc(x,y,r,开始角,结束角,方向)

画布示例

画圆示例

四、JavaScript的开发工具

1.Visual Studio Code(vscode)

2.WebStorm

JavaScript基础及画布相关推荐

最新文章

热门文章