做网站需要购买地域名吗,哈密网站制作公司-哈密网站建设|哈密网络公司|哈密做网站,医院网站建设情况说明书,纯免费聊天的appCanvas容器: canvas标签用来定义图像的容器#xff0c;必须配合脚本来绘制图像#xff0c;canvas也运用于游戏开发。注意#xff1a;canvas绘制图时会出现线条模糊情况#xff0c;这是因为显示屏像素和canvas中定义的一个点不完全重合#xff08;相差0.5#xff09;导致…Canvas容器: canvas标签用来定义图像的容器必须配合脚本来绘制图像canvas也运用于游戏开发。注意canvas绘制图时会出现线条模糊情况这是因为显示屏像素和canvas中定义的一个点不完全重合相差0.5导致若要解决这个问题就要计算canvas中0.5的坐标值。 创建画布 注意一个页面可以创建多个canvas画布每个画布建议给一个id属性方便配合脚本。 canvas idcanvasBox width200 height200/canvasCanvas绘图基本流程 在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();/scriptscriptvar 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轴移动10pxY轴移动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对象这里无需DOMvar 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);};/scriptCanvas绘制帧动画 canvas绘制帧动画的原理利用定时器不断改变图片参数 script// 1.获取canvas容器元素var canvasBox document.querySelector(#canvasBox);// 2.获取上下文这里指获取绘制工具var ctx canvasBox.getContext(2d); //3d技术这里不做详细介绍// 3.创建对象的方式在内存中生成img对象这里无需DOMvar 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);};/scriptCanvas渐变色 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);/scriptCanvas中曲线 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();/scriptCanvas面向对象绘制饼图 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) {// 定义结束弧度为endangleendangle 开始的角度(上一次结束的弧度) 数据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);/scriptCanvas面向对象绘制坐标系 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;// 设置网格的大小尺寸为10this.gridSize 10;// 设置坐标系的间距为20this.space 20;// 定义坐标轴的原点坐标为(this.space,this.canvasHeight - this.space)this.x0 this.space;this.y0 this.canvasHeight - this.space;// 设置箭头的大小为10this.arrowSize 10;// 设置绘制的点的大小为6this.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#000this.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.为构造的坐标函数添加定义好的方法初始化canvasLineChart.prototype.show function(data){this.drawGrid();this.drawNav();this.drawDotted(data);};// 4.创建一个LineChart对象var lineChart new LineChart();// 5.调用对象的方法lineChart.show(data);/scriptCanvas面向对象方式控制小人行走游戏开发方向 主要原理利用雪碧图定位的方式产生帧动画如下雪碧图 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title运动小人/titlestylecanvas {margin: 0 auto;border: 1px solid;}/style/headbodycanvas width1300 height800/canvasscript// 创建对象的函数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提示本文图片等素材来源于网络若有侵权请发邮件至邮箱810665436qq.com联系笔者 删除。 笔者苦海