【初学Javascript并在画布上绘图】

꒰ঌsnail໒꒱

已于 2022-05-03 17:01:40 修改

阅读量2k

点赞数

分类专栏： javascript 文章标签： javascript 前端 html css

于 2022-05-03 16:30:20 首次发布

本文链接：https://blog.csdn.net/m0_46839072/article/details/124555569

版权

javascript 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

初学js的有关知识

1.Javascript是一种什么语言？
2. JavaScript由那几部分组成？
3.页面中引入JavaScript的三种方式
4.document文档对象
5.画布绘图有关知识
6.绘制线条

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、在页面中使用<script src=“js文件名”></script>标签将外部的.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>

②页面展示：
在这里插入图片描述

꒰ঌsnail໒꒱

关注

0
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
【初学Javascript并在画布上绘图】

初学js的有关知识1.Javascript是一种什么语言？2.页面中引入JavaScript的三种方式(1)行内式(2)页面嵌入式(3)外部链接式3.document文档对象4.变量5.画布有关知识。6.绘制线条1.绘制线的方法2.线的样式3.线的路径1.Javascript是一种什么语言？JavaScript：是一个脚本语言(嵌入页面中,通过浏览器解析运行)2.页面中引入JavaScript的三种方式(1)行内式行内式：写在标签的属性中①代码段展示：<body> <
复制链接

扫一扫