html5中Canvas、绘制线条模糊、常见绘制工具、绘制基本图形、绘制图片、面向对象的方式绘制图形图片、绘制文本、帧动画绘制

Canvas容器:

canvas标签用来定义图像的容器，必须配合脚本来绘制图像，canvas也运用于游戏开发。注意：canvas绘制图时会出现线条模糊情况，这是因为显示屏像素和canvas中定义的一个点不完全重合（相差0.5）导致，若要解决这个问题，就要计算canvas中0.5的坐标值。

创建画布：

注意：一个页面可以创建多个canvas画布，每个画布建议给一个id属性方便配合脚本。

	<canvas id='canvasBox' width='200' height='200'></canvas>

Canvas绘图基本流程：

在canvas容器中绘制图形，需要配合使用javascript脚本，具体如下：

	<script>// 1.获取canvas容器元素：var canvasBox = document.querySelector('#canvasBox');// 2.获取上下文（这里指获取绘制工具）：var ctx = canvasBox.getContext('2d'); //3d技术这里不做详细介绍// 3.利用绘制工具配合画笔开始绘制图：ctx.moveTo(100, 100); //moveTo(x,y)表示画笔开始移动的坐标ctx.lineTo(200, 200); //lineTo(x,y)表示绘制直线，坐标为直线末尾点坐标ctx.stroke(); //stroke()表示描边，必须有这项才会显示效果// 开始下一笔绘制：这里可以是多个不同种的绘制，lineTo()只表示绘制直线ctx.moveTo(200, 200);ctx.lineTo(200, 300);ctx.stroke();</script><script>var myCanvas = document.querySelector('canvas');var ctx = myCanvas.getContext('2d');// 平移画布的原点：// ctx.translate(x,y)------参数表示在原有的基础上移动目标点的坐标,即绘制的图和画布都移动（里层移动，外面容器看起来不移动）// 缩放// scale(x,y)------参数表示宽高及坐标缩放比例，画布和图都进行缩放了// 旋转// rotate(angle)-----参数表示以canvas原点旋转angle角度,// ctx.strokeRect(200,100,100,100);//一个矩形 // ctx.translate(10,20)//在原有的基础上X轴移动10px，Y轴移动20px// ctx.strokeRect(200,100,50,50);//一个矩形 // ctx.strokeRect(0,0,100,100);//一个矩形 // ctx.scale(.5,.5)//对下面的矩形进行宽度和高度以及坐标的缩放// ctx.strokeRect(0,0,50,50);//一个矩形// ctx.strokeRect(300,200,100,100);//一个矩形 // ctx.rotate(Math.PI / 8)//对下面的矩形进行宽度和高度以及坐标的旋转// ctx.strokeRect(300,200,50,50);//一个矩形var startAngle = 0;ctx.translate(150, 150);setInterval(function() {startAngle += Math.PI / 180;ctx.rotate(startAngle);ctx.strokeRect(-50, -50, 100, 100);}, 500);//更多绘制工具如下表：</script>

绘制工具：
在这里插入图片描述
续：在这里插入图片描述
Canvas绘制图片：

	<script>// 1.获取canvas容器元素：var canvasBox = document.querySelector('#canvasBox');// 2.获取上下文（这里指获取绘制工具）：var ctx = canvasBox.getContext('2d'); //3d技术这里不做详细介绍// 3.创建对象的方式在内存中生成img对象，这里无需DOM：var image = new Image();image.src = '捕获.PNG';// 等image加载完在处理image.onload = function() {// 这里图片一定加载完成了，也有可能在这段代码执行前加载完，所以这段代码一般放在图片路径的前面。// 绘制图片的三种方式：// 第一种：传入 3 个参数的用法：ctx.drawImage(img对象,x,y)---分别是img对象，图片的左上角在canvas中的坐标(x,y)。// ctx.drawImage(image,0,0);// 第二种：传入 5 个参数的用法：ctx.drawImage(img对象,x,y,w,h)---分别是img对象，图片的左上角在canvas中的坐标(x,y)和图片的缩放宽度w和高度h。// ctx.drawImage(image,0,0,500,400);// 第三种：传入 9 个参数的用法：ctx.drawImage(img对象,要渲染的对象定位坐标x,要渲染的对象定位坐标y,截取对象的宽度w,截取对象的宽度h,对象在canvas中的位置定位x,对象在canvas中的位置定位y,对象缩放宽度w,对象缩放高度h)ctx.drawImage(image, 400, 400, 2000, 2000, 0, 0, 300, 200);};</script>

Canvas绘制帧动画：

canvas绘制帧动画的原理：利用定时器不断改变图片参数：

	<script>// 1.获取canvas容器元素：var canvasBox = document.querySelector('#canvasBox');// 2.获取上下文（这里指获取绘制工具）：var ctx = canvasBox.getContext('2d'); //3d技术这里不做详细介绍// 3.创建对象的方式在内存中生成img对象，这里无需DOM：var image = new Image();image.src = 'image/4.png';// 4.等image加载完在处理绘制：image.onload = function() {// 第三种：传入 9 个参数的用法：ctx.drawImage(img对象,要渲染的对象定位坐标x,要渲染的对象定位坐标y,截取对象的宽度w,截取对象的宽度h,对象在canvas中的位置定位x,对象在canvas中的位置定位y,对象缩放宽度w,对象缩放高度h)// 拿到图片的宽度和高度：var imageWidth = image.width;var imageHeight = image.height;// 声明一个计数器：var i = 0;// 利用定时器开启动画：setInterval(function() {i++;// 解决重影问题，需要每次清除canvas画布中之前的绘制图：ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);//开始绘制新图片ctx.drawImage(image, 80 * i, 0, imageWidth / 4, imageHeight / 4, 300, 200, 100, 100);if (i >= 3) {i = 0;};}, 300);};</script>

Canvas渐变色：

	<script>// 1.获取canvas容器元素：var canvasBox = document.querySelector('#canvasBox');// 2.获取上下文（这里指获取绘制工具）：var ctx = canvasBox.getContext('2d'); //3d技术这里不做详细介绍// 3.定义一个渐变色：var linearGradient = ctx.createLinearGradient(10, 10, 10, 100);// 4.添加渐变的颜色：linearGradient.addColorStop(0.8, 'green');linearGradient.addColorStop(.2, 'red');// 5.设置填充颜色为上面定义的渐变色ctx.fillStyle = linearGradient;// 6.定义一个填充的矩形ctx.fillRect(10, 10, 100, 100);</script>

Canvas中曲线：

canvas中绘制曲线都是套用数学公式进行绘制的，其工具还是基础工具，想要绘制复杂的图形，那么对数学要求功底就非常高了，这里简单介绍一下，绘制思路，如：

	<script>// 1.获取canvas容器元素：var canvasBox = document.querySelector('#canvasBox');// 2.获取上下文（这里指获取绘制工具）：var ctx = canvasBox.getContext('2d'); //3d技术这里不做详细介绍// 3.绘制曲线思路（数学功底要求）：不断改变线条运动轨迹达到效果for (var i = 0; i < 600; i++) {var x = i;var y = Math.pow(x / 20, 2) + 30;ctx.lineTo(x, y);};// 4.描边：ctx.stroke();</script>

Canvas面向对象绘制饼图：

	<script>// 1.获取canvas容器元素：var canvasBox = document.querySelector('#canvasBox');// 2.获取上下文（这里指获取绘制工具）：var ctx = canvasBox.getContext('2d'); //3d技术这里不做详细介绍// 3.以 面向对象的方式绘制一个饼图：// 声明一个函数：var PieChart = function(ctx) {// 绘制工具：this.ctx = ctx || document.querySelector('canvas').getContext('2d');// 拿到canvas的尺寸大小：this.w = this.ctx.canvas.width;this.h = this.ctx.canvas.height;// 定义圆心的坐标：this.x0 = this.w / 2 + 100;this.y0 = this.h / 2;// 定义圆的半径：this.radius = 100;// 定义文字部分伸出去的线的长度：this.outLine = 30;// 定义说明矩形的宽度：this.rectW = 30;// 定义说明矩形的高度：this.rectH = 12;// 距离旁边的间距：this.space = 5;};// 为 PieChart函数添加画饼图的方法：PieChart.prototype.drawPie = function(data) {// 解决this指向不同的问题：var that = this;// 调用下面的trans方法得到新的data数据，并用变量angleList接收：var angleList = this.trans(data);// 定义起始弧度：var begangle = 0;//遍历angleList得到数据中的angle弧度：angleList.forEach(function(item, i) {// 定义结束弧度为endangle，endangle = 开始的角度(上一次结束的弧度) + 数据angleList中的anglevar endangle = begangle + item.angle;// 开启新路径：ctx.beginPath();//移动画笔到(that.x0,that.y0)：ctx.moveTo(that.x0, that.y0);// 绘制圆的轨迹ctx.arc(that.x0, that.y0, that.radius, begangle, endangle);// 随机的设置每个扇形的填充颜色：var colors = `rgb(${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)})`;ctx.fillStyle = colors;// 填充扇形ctx.fill();//调用drawTitle方法绘制扇形： that.drawTitle(begangle, item.angle, item.title, colors);// 调用drawDesc方法绘制说明的矩形：that.drawDesc(i, item.title);// 把结束弧度给起始弧度作为下一次绘制扇形的起始弧度begangle = endangle;});};// 为 PieChart函数添加画文字的方法：PieChart.prototype.drawTitle = function(begAngle, angle, text, color) {// 计算伸出去的边的长度(斜边)：var edge = this.radius + this.outLine;// 计算伸出去的边的终点的X的长度：var edgeX = Math.cos(begAngle + angle / 2) * edge;// 计算伸出去的边的终点的Y的长度：var edgeY = Math.sin(begAngle + angle / 2) * edge;// 计算伸出去的边的终点的坐标：var outX = this.x0 + edgeX;var outY = this.y0 + edgeY;// 开启新路径：this.ctx.beginPath();// 移动画笔到(this.x0,this.y0)的位置：this.ctx.moveTo(this.x0, this.y0);// 绘制伸出去线的轨迹：this.ctx.lineTo(outX, outY);this.ctx.strokeStyle = color;this.ctx.font = '15px Microsoft YaHei';this.ctx.textBaseline = 'bottom';var titleWidth = this.ctx.measureText(text).width;// 判断Math.cos(begAngle + angle /2)的正负决定水平线的方向：if (Math.cos(begAngle + angle / 2) > 0) {// 绘制伸出去线的轨迹：this.ctx.lineTo(outX + titleWidth, outY);// 开始绘制文字titlethis.ctx.textAlign = 'start'; //文本居中对齐，属性值：left,right,center,end,startthis.ctx.fillText(text, outX, outY);} else {// 绘制伸出去线的轨迹：this.ctx.lineTo(outX - titleWidth, outY);// 开始绘制文字titlethis.ctx.textAlign = 'end'; //文本居中对齐，属性值：left,right,center,end,startthis.ctx.fillText(text, outX, outY);};this.ctx.stroke();};// PieChart的说明的方法：PieChart.prototype.drawDesc = function(index, tex) {// 绘制带独立路径的矩形：this.ctx.fillRect(this.space, this.space + index * (this.space + this.rectH), this.rectW, this.rectH);this.ctx.beginPath();this.ctx.textAlign = 'start';this.ctx.font = '10px Microsoft YaHei';this.ctx.fillText(tex, this.space + this.rectW + 5, this.space + index * (this.space + this.rectH) + 12);};// 把数据中的num转化为弧度并追加到data中返回新的data数据PieChart.prototype.trans = function(data) {var sum = 0;data.forEach(function(item, i) {sum += item.num;});data.forEach(function(item, i) {var angle = Math.PI * 2 * item.num / sum;item.angle = angle; //追加弧度到data数据中});return data;};// PieChart初始化：PieChart.prototype.init = function(data) {this.drawPie(data);};// 定义一个数据data:var data = [{title: '15-20岁',num: 16}, {title: '20-25岁',num: 12}, {title: '25-30岁',num: 56}, {title: '30-35岁',num: 12}, {title: '35-40岁',num: 42}, {title: '45-50岁',num: 12}, {title: '50岁以上',num: 22}];// 实例化一个对象:var piechart = new PieChart();piechart.init(data);</script>

Canvas面向对象绘制坐标系：

	<script>//1. 构造坐标系函数：var LineChart = function(ctx){this.ctx = ctx || document.querySelector('#canvaBox').getContext('2d');// 获取画布的大小尺寸：this.canvasWidth = this.ctx.canvas.width;this.canvasHeight = this.ctx.canvas.height;// 设置网格的大小尺寸为10：this.gridSize = 10;// 设置坐标系的间距为20：this.space = 20;// 定义坐标轴的原点坐标为(this.space,this.canvasHeight - this.space)this.x0 = this.space;this.y0 = this.canvasHeight - this.space;// 设置箭头的大小为10：this.arrowSize = 10;// 设置绘制的点的大小为6：this.dottedSize = 6;// 点的坐标和数据有关，数据可视化：};// 2.绘制canvas(LineChar)中需要的数据：// 绘制网格线：LineChart.prototype.drawGrid = function(){// x方向的线：this.ctx.strokeStyle = '#999';var xLineTotal = Math.floor(this.canvasHeight / this.gridSize);//x方向的线的总条数for(var i = 0;i < xLineTotal;i ++){this.ctx.beginPath();this.ctx.moveTo(0,this.gridSize * i - .5);this.ctx.lineTo(this.canvasWidth,this.gridSize * i - .5);this.ctx.stroke();};// y方向的线：var yLineTotal = Math.floor(this.canvasWidth / this.gridSize);//y方向的线的总条数for(var j = 0;j < yLineTotal; j++){this.ctx.beginPath();this.ctx.moveTo(this.gridSize * j - .5,0);this.ctx.lineTo(this.gridSize * j - .5,this.canvasHeight);this.ctx.stroke();};};// 绘制坐标系：LineChart.prototype.drawNav = function(){this.ctx.strokeStyle='#000'this.ctx.beginPath();// 设置x和y的原点坐标为(x0,y0):this.ctx.moveTo(this.x0 - .5,this.y0 - .5);// 绘制x轴：this.ctx.lineTo(this.canvasWidth,this.y0 -.5);this.ctx.lineTo(this.canvasWidth - this.gridSize,this.y0 + this.gridSize / 2);this.ctx.lineTo(this.canvasWidth - this.gridSize,this.y0 - this.gridSize / 2);this.ctx.lineTo(this.canvasWidth,this.y0 -.5);this.ctx.stroke();this.ctx.fill();// 绘制y轴：this.ctx.beginPath();this.ctx.moveTo(this.x0 - .5,this.y0 - .5);this.ctx.lineTo(this.x0 - .5,-0.5);this.ctx.lineTo(this.x0 + this.gridSize / 2,this.gridSize - 0.5);this.ctx.lineTo(this.x0 - this.gridSize / 2,this.gridSize - 0.5);this.ctx.lineTo(this.x0 - .5,-0.5);this.ctx.stroke();this.ctx.fill();};LineChart.prototype.drawDotted = function(data){var that = this;// 记录当前坐标：var VarCanvasX = 0;var VarCanvasY = 0;// 遍历传入的date数据：data.forEach(function(item,i){// 在canvas中的坐标：var canvasX = that.x0 + item.x;var canvasY = that.y0 - item.y;// 在canvas中绘制点：that.ctx.beginPath();that.ctx.moveTo(canvasX - that.dottedSize / 2 ,canvasY - that.dottedSize /2);that.ctx.lineTo(canvasX - that.dottedSize / 2 ,canvasY + that.dottedSize /2);that.ctx.lineTo(canvasX + that.dottedSize / 2 ,canvasY + that.dottedSize /2);that.ctx.lineTo(canvasX + that.dottedSize / 2 ,canvasY - that.dottedSize /2);that.ctx.closePath();that.ctx.fill();// 用直线连接每一个点：if(i == 0){//判断当为0时，为第一个点的时候，起点为(x0,y0),否则起点为上一个点that.ctx.beginPath();that.ctx.moveTo(that.x0,that.y0);that.ctx.lineTo(canvasX,canvasY);that.ctx.stroke();}else{that.ctx.beginPath();that.ctx.moveTo(VarCanvasX,VarCanvasY);that.ctx.lineTo(canvasX,canvasY);that.ctx.stroke();};VarCanvasX = canvasX;VarCanvasY = canvasY;});}; //绘制所有点：var data =[{x:50,y:120},{x:100,y:140},{x:150,y:150},{x:200,y:170}, {x:250,y:110}, {x:300,y:170},{x:350,y:160},{x:400,y:120},{x:450,y:130}, {x:500,y:140}];//3.为构造的坐标函数添加定义好的方法初始化canvas：LineChart.prototype.show = function(data){this.drawGrid();this.drawNav();this.drawDotted(data);};// 4.创建一个LineChart对象：var lineChart = new LineChart();// 5.调用对象的方法：lineChart.show(data);</script>

Canvas面向对象方式控制小人行走（游戏开发方向）：

主要原理：利用雪碧图定位的方式产生帧动画，如下雪碧图：
在这里插入图片描述

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>运动小人</title><style>canvas {margin: 0 auto;border: 1px solid;}</style></head><body><canvas width='1300' height='800'></canvas><script>// 创建对象的函数：var Person = function(cTx) {// 定义属性并赋值：this.ctx = cTx || document.querySelector('canvas').getContext('2d');this.src = 'image/04.png';this.canvasWidth = this.ctx.canvas.width;this.canvasHeight = this.ctx.canvas.height;// 行走的步伐大小：this.stepSize = 10;// 行走的方向：0---前面  1----左边 2----右边  3-----后面this.direction = 0;// 记录当前图片的位置：/*x轴方向的偏移步数*/this.stepX = 0;/*y轴方向的偏移步数*/this.stepY = 0;// 调用初始化方法this.init();};// 加载图片的业务：Person.prototype.loadimage = function(callback) {var image = new Image(); // 创建对象的方式载入图片到内存中image.onload = function() {callback && callback(image); //图片加载完成后可以通过回调函数的方式获取图片的相关信息，也可直接在这个函数里面直接获取图片的信息};image.src = this.src;};// 初始化方法：Person.prototype.init = function() {var that = this;// 1.调用 加载图片的业务 的方法并通过回调函数获取图片的信息this.loadimage(function(image) {// 图片的大小：that.imageWidth = image.width;that.imageHeight = image.height;// 人物的大小：that.personWidth = that.imageWidth / 4;that.personHeight = that.imageHeight / 4;// 绘制图片的起点：that.x0 = (that.canvasWidth - that.personWidth) / 2;that.y0 = (that.canvasHeight - that.personHeight) / 2;// 2.默认绘制小人在canvas中间：that.ctx.drawImage(image, 0, 0, that.personWidth, that.personHeight, that.x0, that.y0, that.personWidth, that.personHeight);// 3.通过方向键控制小人行走// 注册键盘按下事件控制小人行走的方向和定位：上---38   下---40   左----37   右---39that.index = 0;document.onkeydown = function(e) {if (e.keyCode == 38) {// 上that.direction = 3;that.stepY--;that.DrawImage(image);} else if (e.keyCode == 40) {// 下that.direction = 0;that.stepY++;that.DrawImage(image);} else if (e.keyCode == 37) {// 左that.direction = 1;that.stepX--;that.DrawImage(image);} else if (e.keyCode == 39) {// 右that.direction = 2;that.stepX++;that.DrawImage(image);};};});};// 绘制通过方向控制行走的小人的方法：Person.prototype.DrawImage = function(image) {this.index++;// 清除画布：this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);// 绘制小人行走：this.ctx.drawImage(image,this.index * this.personWidth, this.direction * this.personHeight,this.personWidth, this.personHeight,this.x0 + this.stepX * this.stepSize, this.y0 + this.stepY * this.stepSize,this.personWidth, this.personHeight);if (this.index >= 3) {this.index = 0;}};new Person();</script></body></html>

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者 删除。
笔者：苦海

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/575422.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

MySQL INFORMATION_SCHEMA 使用

MySQL INFORMATION_SCHEMA 使用

一、INFORMATION_SCHEMA介绍 第一个查询看看库里有多少个表&#xff0c;表名等select * from INFORMATION_SCHEMA.TABLES information_schema这张数据表保存了MySQL服务器所有数据库的信息。如数据库名&#xff0c;数据库的表&#xff0c;表栏的数据类型与访问权限等。再简单点…
阅读更多...
mrql初级教程-使用（er）

mrql初级教程-使用（er）

最近使用mrql做xml文件解析&#xff0c;使用xpath来进行判断使用的方法如下&#xff0c;其中t.mrql文件如下&#xff1a;v args[1];store ty:source(xml,args[0],{"page"},xpath(.[idID6]/place));ty;执行下面的命令mrql -local t.mrql hdfs://183.175.12.220:9010/u…
阅读更多...
web Worker简介、web Worker报错分析、作用

web Worker简介、web Worker报错分析、作用

web Worker&#xff1a; web Worker是运行在后台的javascript&#xff0c;不会影响性能&#xff0c;常用于高耗费CPU的任务&#xff0c;必须部署到线上才可以正常使用&#xff0c;这里有三个方法比较重要&#xff0c;需要注意&#xff1a; postMessage(),发送消息&#xff0c…
阅读更多...
SSE事件作用，错误分析

SSE事件作用，错误分析

Server-Sent&#xff08;SSE&#xff09;&#xff1a; server sent用于自动接收服务器更新&#xff0c;当服务器发生数据更新时&#xff0c;此事件将自动执行来更新页面数据&#xff0c;常用于博文、股价等不断变化的项目中。下面将简单介绍SSE中三个常用事件&#xff1a; on…
阅读更多...
css3盒模型、过渡、转换介绍

css3盒模型、过渡、转换介绍

CSS3中盒模型&#xff1a; 前面CSS中学到的盒子模型给padding、border会撑开盒子的大小&#xff0c;实际大小要通过计算才能得到&#xff0c;为了解决这个问题&#xff0c;CSS3推出了box-sizing属性来解决此问题&#xff0c;当box-sizing的属性值为border-box时&#xff0c;无…
阅读更多...
css3中animation动画、浏览器私有前缀、文字阴影、滤镜

css3中animation动画、浏览器私有前缀、文字阴影、滤镜

animation动画&#xff1a; 可以设置多个节点来控制一个或 一组动画&#xff0c;动画可以实现更多变化&#xff0c;更多控制&#xff0c;连续自动播放等效果。动画的使用分两步&#xff1a;1、定义动画 2、调用动画&#xff08;调用必须写调用名称和持续时间)&#xff0c;其属…
阅读更多...
ASP.NET 页生命周期

ASP.NET 页生命周期

参考&#xff1a;http://msdn.microsoft.com/zh-cn/library/ms178472(vvs.100).aspx转载于:https://www.cnblogs.com/pengpenghappy/p/3778721.html
阅读更多...
计算机基础简介、编程语言、翻译器、数据储存

计算机基础简介、编程语言、翻译器、数据储存

计算机基础&#xff1a; 编程语言&#xff1a; 编程语言分机器语言、汇编语言、高级语言&#xff0c;机器语言只有计算机本身认识&#xff0c;是二进制的&#xff1b;汇编语言是较低层的指令式语言&#xff0c;有很多指令单词发出命令&#xff0c;程序员可以认识&#xff0c;…
阅读更多...
IE8“开发人员工具”（下）

IE8“开发人员工具”（下）

浏览器模式 说白了&#xff0c;就是让用户选择当前页面用何种IE版本去渲染。 文本模式 说起“文本模式”这个名词&#xff0c;这又要回到渲染页面的3种模式了&#xff1a;诡异模式&#xff08;Quirks mode&#xff0c;也有翻译为兼容模式、怪异模式的&#xff09;&#xff0c;标…
阅读更多...
javascript历史、作用、三大组成、javascript代码书写位置、注意事项、变量

javascript历史、作用、三大组成、javascript代码书写位置、注意事项、变量

JavaScript简介 JavaScript历史&#xff1a; JavaScript是一门解释型、动态类型、基于对象的脚本语言(不需要编译&#xff0c;直接执行&#xff0c;与之相对的是编译型语言)&#xff0c;由美国网景公司的布兰登艾奇发明&#xff0c;起初称LiveScript&#xff0c;其简称js。 …
阅读更多...
javascript中基本包装、算数运算符、递增递减运算符、赋值运算符、比较运算符、逻辑运算符、运算符优先级

javascript中基本包装、算数运算符、递增递减运算符、赋值运算符、比较运算符、逻辑运算符、运算符优先级

基本包装类型&#xff1a; 指基本类型的数据变量通过调用属性或者方法包装成了复杂类型&#xff0c;这个变量也称为基本包装类型对象 <script>var str hello;str str.replace(ll, ee);console.log(str); //heeeo//通过基本包装&#xff0c;无论Boolean对象中传入true还…
阅读更多...
流程控制介绍，顺序结构、分支结构、循环结构、Promise对象、throw语句、break和continue关键字

流程控制介绍，顺序结构、分支结构、循环结构、Promise对象、throw语句、break和continue关键字

流程控制 流程控制&#xff1a;指代码的执行顺序&#xff0c;有三种方式&#xff1a;顺序结构、分支结构、循环结构 顺序结构&#xff1a; 代码从上到下&#xff0c;从左到右的执行顺序。 分支语句&#xff1a; if语句、if-else语句、if-else if-else语句、switch-case语…
阅读更多...
楼宇对讲门铃的芯片选型分析

楼宇对讲门铃的芯片选型分析

目前很多的高层住宅都使用了对讲门铃了&#xff0c;在频繁使用中&#xff0c;门铃会出现的越来越多种类&#xff0c;下面我就简单的介绍会有用到的几款芯片. 语音通话芯片&#xff1a;D34018,D34118,D5020,D31101; D34018 单片电话机通话电路&#xff0c;合并了必 需的放大器…
阅读更多...
javascript中内置对象简介、Array

javascript中内置对象简介、Array

内置对象&#xff1a; javascript的三种对象&#xff1a;1.内置对象—JavaScript自带的对象&#xff1b;2.自定义对象—自己定义构造函数创建对象&#xff1b;3.浏览器对象— BOM时候介绍&#xff0c;几个常用内置对象&#xff1a;Math Date String Array Object Array对象&a…
阅读更多...
javascript中Date对象及方法

javascript中Date对象及方法

Date对象&#xff1a; 该对象呈现时间中的某个时刻。其本质是自1970年1月1日&#xff08;UTC&#xff09;起经过的毫秒数&#xff0c;相关属性的方法如下&#xff1a;&#xff08;如果Date对象中传入指定的时间&#xff0c;则以传入的指定时间返回相关数据&#xff0c;就不会以…
阅读更多...
JAVA Web学习篇--Servlet

JAVA Web学习篇--Servlet

Servlet由来 做过BS项目的人都知道&#xff0c;浏览器可以依据HTML静态标记语言来显示各式各样的网页。可是假设我们须要在网页上完毕一些业务逻辑&#xff1a;比方登陆验证。或者说网页显示的内容在server的数据库中。假设是这样&#xff0c;除了负责显示的HTML标记之外&#…
阅读更多...
javascript中Math对象及方法

javascript中Math对象及方法

Math对象&#xff1a; 其所有属性与方法都是静态的&#xff0c;其相关属性和方法如下&#xff1a; 继&#xff1a; 继&#xff1a; 提示&#xff1a;本文图片等素材来源于网络&#xff0c;若有侵权&#xff0c;请发邮件至邮箱&#xff1a;810665436qq.com联系笔者 删除。 笔者…
阅读更多...
javascript中NaN属性、null对象、Number对象、Object对象

javascript中NaN属性、null对象、Number对象、Object对象

NaN属性&#xff1a; 表示不是一个数字&#xff0c;是全局对象的属性&#xff0c;其初始值为NaN <script>console.log(NaN NaN); //false</script>null对象&#xff1a; 特指对象的值未设置 <script>console.log(null undefined); //trueconsole.log(nul…
阅读更多...
Apache安装、配置、卸载

Apache安装、配置、卸载

下载安装配置Apache&#xff1a; 1.将Apache官方下载地址&#xff1a;https://www.apachelounge.com/download/&#xff0c;复制到浏览器打开&#xff0c;选择系统支持的版本下载&#xff0c;如&#xff1a; 2.将下载好的压缩包剪贴到C盘根目录&#xff08;这里为了方便&…
阅读更多...
企业级应用架构(一) 三层架构之解耦

企业级应用架构(一) 三层架构之解耦

前言 前段时间朋友拿了个网站给我&#xff0c;让我帮忙添加几个小功能&#xff0c;我爽快的答应了,但是当我打开源码&#xff0c;我瞬间就奔溃了&#xff0c;整个项目连最基本的三层框架也没有搭建&#xff0c;仅仅是封装了一个sqlhelp作为数据库的操作接口&#xff0c;项目中的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023