校园网网站建设规划书做的网站适应屏幕大小

当前位置： 首页 > news >正文

校园网网站建设规划书,做的网站适应屏幕大小,wordpress哪个php版本好,啥是深圳网站定制开发文章目录 Canvas基础知识要点一、基本概念二、常用参数三、实例四、场景应用说明完结 Canvas基础知识要点 一、基本概念 Canvas是HTML5中的一个标签#xff0c;用于在网页上通过JavaScript绘制图形、动画等。它提供了一个空白的、基于像素的绘图区域#xff0c;就像一块画布… 文章目录 Canvas基础知识要点一、基本概念二、常用参数三、实例四、场景应用说明完结 Canvas基础知识要点 一、基本概念 Canvas是HTML5中的一个标签用于在网页上通过JavaScript绘制图形、动画等。它提供了一个空白的、基于像素的绘图区域就像一块画布开发者可以在上面使用JavaScript的API来绘制各种图形。 二、常用参数 beginPath、moveTo、lineTo和strokeStyle的应用 以下是一个简单的示例使用canvas绘制一个三角形。 canvas idmyCanvas width200 height200/canvas scriptconst canvas document.getElementById(myCanvas);const ctx canvas.getContext(2d);// 设置线条颜色ctx.strokeStyle blue;// 开始一个新路径ctx.beginPath();// 移动到起始点ctx.moveTo(50, 50);// 绘制第一条边ctx.lineTo(150, 50);// 绘制第二条边ctx.lineTo(100, 150);// 闭合路径对于填充图形很重要这里主要是为了展示完整路径ctx.closePath();// 绘制线条ctx.stroke(); /script在这个例子中 beginPath用于开始一个新的绘制路径。这是很重要的因为如果不使用它后续的绘制命令会和之前的路径合并。moveTo将绘图“笔尖”移动到指定的坐标(50, 50)这个点是三角形的一个顶点。lineTo用于从当前点由moveTo指定或者上一个lineTo结束的点绘制一条直线到指定的坐标。这里绘制了三角形的两条边。strokeStyle用于设置线条的颜色这里设置为蓝色。最后stroke方法用于实际绘制路径的轮廓。 arc的应用 下面的示例绘制一个圆形。 canvas idmyCanvas width200 height200/canvas scriptconst canvas document.getElementById(myCanvas);const ctx canvas.getContext(2d);ctx.beginPath();// 圆心坐标为(100, 100)半径为50起始角度为0结束角度为2 * Math.PI一个完整的圆ctx.arc(100, 100, 50, 0, 2 * Math.PI);ctx.strokeStyle red;ctx.stroke(); /script对于arc方法 它的参数依次是圆心的x坐标、圆心的y坐标、圆的半径、起始弧度和结束弧度。这里通过设置起始弧度为0结束弧度为2 * Math.PI约等于6.28来绘制一个完整的圆。圆心坐标为(100, 100)半径为50。最后设置线条颜色为红色并绘制出圆形。 quadraticCurveTo的应用 这个方法用于绘制二次贝塞尔曲线。下面是一个简单的示例绘制一条二次贝塞尔曲线。 canvas idmyCanvas width200 height200/canvas scriptconst canvas document.getElementById(myCanvas);const ctx canvas.getContext(2d);ctx.beginPath();ctx.moveTo(20, 180);// 控制点坐标为(100, 20)结束点坐标为(180, 180)ctx.quadraticCurveTo(100, 20, 180, 180);ctx.strokeStyle green;ctx.stroke(); /script解释 首先moveTo将起始点设置为(20, 180)。然后quadraticCurveTo方法用于绘制二次贝塞尔曲线它有三个参数。第一个参数是控制点的x坐标第二个参数是控制点的y坐标第三个参数是曲线结束点的x坐标和y坐标。在这个例子中控制点是(100, 20)结束点是(180, 180)。最后设置线条颜色为绿色并绘制出曲线。 渐变的应用线性渐变 以下示例展示如何在canvas中使用线性渐变。 canvas idmyCanvas width200 height200/canvas scriptconst canvas document.getElementById(myCanvas);const ctx canvas.getContext(2d);// 创建一个线性渐变对象const linearGradient ctx.createLinearGradient(0, 0, 200, 0);linearGradient.addColorStop(0,red);linearGradient.addColorStop(1, blue);ctx.beginPath();ctx.lineWidth 50;ctx.moveTo(0, 0);ctx.lineTo(200, 0);ctx.strokeStyle linearGradient;ctx.stroke(); /script步骤如下 首先使用createLinearGradient方法创建一个线性渐变对象。它的参数是渐变的起始点x坐标、起始点y坐标、结束点x坐标和结束点y坐标。这里创建的是一个从左到右x轴方向的渐变。然后使用addColorStop方法为渐变添加颜色停止点。第一个参数是位置取值范围是0到1第二个参数是颜色。这里在0位置添加红色在1位置添加蓝色。接着开始路径绘制一条直线从(0, 0)到(200, 0)并将strokeStyle设置为刚才创建的线性渐变最后绘制出渐变线条。 填充应用fill 以下示例绘制一个填充颜色的矩形。 canvas idmyCanvas width200 height200/canvas scriptconst canvas document.getElementById(myCanvas);const ctx canvas.getContext(2d);ctx.beginPath();ctx.rect(50, 50, 100, 100);ctx.fillStyle yellow;ctx.fill(); /script解释 首先beginPath开始一个新路径然后rect方法用于定义一个矩形它的参数依次是矩形左上角的x坐标、左上角的y坐标、矩形的宽度和高度。这里定义了一个左上角坐标为(50, 50)宽度为100高度为100的矩形。fillStyle设置填充颜色为黄色最后fill方法用于填充这个矩形。。
三、实例 绘制一个笑脸 效果图如下 !DOCTYPE html html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headbody!– id标识元素的唯一性width:画布的宽度height:画布的高度–canvas idc1 width600 height400当前浏览器不支持canvas请下载最新的浏览器a hrefhttps://www.google.cn/intl/zh-CN/chrome/立即下载/a/canvasscript// 1. 找到画布var c1 document.getElementById(c1);// 判断是否有getContextif (!c1.getContext) {console.log(当前浏览器不支持canvas请下载最新的浏览器);}// 2. 获取画笔上下文对象var ctx c1.getContext(2d);ctx.beginPath();// 绘制一张脸ctx.arc(75, 75, 50, 0, Math.PI * 2);ctx.stroke();ctx.closePath();ctx.beginPath();// 绘制嘴巴ctx.arc(75, 75, 35, 0, Math.PI);ctx.stroke();ctx.closePath();ctx.beginPath();// 绘制左眼ctx.arc(60, 65, 5, 0, Math.PI * 2);ctx.stroke();ctx.closePath();ctx.beginPath();// 绘制右眼ctx.arc(90, 65, 5, 0, Math.PI * 2);ctx.closePath();ctx.stroke();/script/body /html 绘制一个刮刮卡 效果图如下 !DOCTYPE html html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle* {margin: 0;padding: 0;}#ggk {width: 600px;height: 400px;font-size: 30px;font-weight: 900;text-align: center;line-height: 400px;overflow: hidden;position: absolute;left: 0;top: 0;}canvas {position: absolute;left: 0;top: 0;z-index: 10;}/style/headbody!– id标识元素的唯一性width:画布的宽度height:画布的高度–div idggk谢谢惠顾/divcanvas idc1 width600 height400/canvasscript// 1. 找到画布var c1 document.getElementById(c1);// 2. 获取画笔上下文对象var ctx c1.getContext(2d);// 3. 绘制图形let img new Image();img.src ./imgs/m2.png;img.onload function () {ctx.drawImage(img, 0, 0, 600, 400);};var isDraw false;c1.onmousedown function () {isDraw true;};c1.onmouseup function () {isDraw false;};c1.onmousemove function (e) {if (isDraw) {var x e.pageX;var y e.pageY;ctx.globalCompositeOperation destination-out;ctx.arc(x, y, 20, 0, 2 * Math.PI);ctx.fill();}};let random Math.random();if (random 0.1) {var ggkDiv document.querySelector(#ggk);ggkDiv.innerHTML 恭喜您获得canvas 惊喜镜头大奖;}/script/body /html 绘制文本 效果图如下 !DOCTYPE html html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headbody!– id标识元素的唯一性width:画布的宽度height:画布的高度–canvas idc1 width600 height400当前浏览器不支持canvas请下载最新的浏览器a hrefhttps://www.google.cn/intl/zh-CN/chrome/立即下载/a/canvasscript// 1. 找到画布var c1 document.getElementById(c1);// 判断是否有getContextif (!c1.getContext) {console.log(当前浏览器不支持canvas请下载最新的浏览器);}// 2. 获取画笔上下文对象var ctx c1.getContext(2d);// 文字大小/字体ctx.strokeStyle #ff0000;ctx.font 100px Microsoft YaHei;// 填充渲染文字// fillText(文本文本的起点x,文本起点的y,绘制文字最大的宽度)// ctx.fillText(你好, 300, 200, 100);// 文本对齐选项textAlign,start(默认),end,left,right,centerctx.textAlign center;// 文本基线对齐,textBaseline,top,bottom,alphabeticctx.textBaseline middle;// 文本的方向// ctx.direction rtl;// 预测量文本宽度let text ctx.measureText(Hello world!);console.log(text);ctx.strokeText(Hello world!, 300, 200);ctx.arc(270, 200, 5, 0, 2 * Math.PI);ctx.fill();/script/body /html 四、场景应用说明 数据可视化 Canvas在数据可视化领域应用广泛。例如可以使用Canvas绘制柱状图、折线图、饼图等。以绘制简单的柱状图为例通过获取数据集中每个数据项的值根据画布的尺寸和数据范围使用fillRect方法绘制不同高度的矩形来表示数据。这样可以直观地展示数据的大小关系和分布情况。 游戏开发 在网页游戏开发中Canvas是重要的工具。可以用于绘制游戏角色、地图、道具等各种游戏元素。例如在一个2D横版过关游戏中通过不断更新游戏角色的位置使用translate等方法并重新绘制游戏场景包括背景、障碍物、敌人等实现游戏的动态效果。同时可以通过处理用户的输入事件如键盘按键或鼠标点击来控制游戏角色的行为。 动画制作 Canvas可以制作各种动画如简单的图形动画、加载动画等。比如制作一个旋转的正方形动画。通过setInterval或requestAnimationFrame函数在每一帧中更新正方形的旋转角度然后重新绘制这个带有旋转效果的正方形从而实现动画效果。requestAnimationFrame是更推荐的方式因为它会根据浏览器的刷新率来优化动画的性能。
完结