哪个网站可以做会计题,为什么百度搜出来的网站只有网址没有网站名和网页摘要.,服务器安装完面板怎么做网站,58同城 网站建设 成都本章节讲解Canvas如何结合 Openlayer 使用#xff0c;首先我们讲解Canvas的绘图基础。我们初始化地图的时候可以看见#xff0c;实际上Openlayer的地图就是用Canvas实现绘制的。Canvas绘制基本概念什么是canvas#xff1f;HTML5 canvas 元素用于图形的绘制#…本章节讲解Canvas如何结合 Openlayer 使用首先我们讲解Canvas的绘图基础。我们初始化地图的时候可以看见实际上Openlayer的地图就是用Canvas实现绘制的。Canvas绘制基本概念什么是canvasHTML5 canvas 元素用于图形的绘制区别于css它的绘制通过 JavaScript 来完成绘制。canvas 标签只是 图形容器 您必须使用脚本来绘制图形Canvas API主要聚焦于2D图形。同样使用canvas元素的 WebGL API 则用于绘制硬件加速的2D和3D图形。绘制矩形2.1设置canvas元素
!-- 1、设置canvas元素 --canvas idcanvas width200 height200/canvasscript2.2获取canvas/* 2、获取canvas */ const canvas document.getElementById(canvas);2.3获取上下文返回一个对象对象包含绘制图形的方法和属性
/* 3、getContext()返回一个对象,对象包含绘制图形的方法和属性 */ const ctx canvas.getContext(2d);2.4执行绘制/* 4、执行绘制fillRect(x,y,width,height) x,y*/ ctx.fillRect(10,10,100,100); ctx.fillStyle #3332.5完整代码示例
!DOCTYPE htmlhtml langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body !-- 1、设置canvas元素 -- canvas idcanvas width200 height200/canvas script /* 2、获取canvas */ const canvas document.getElementById(canvas); /* 3、getContext()返回一个对象,对象包含绘制图形的方法和属性 */ const ctx canvas.getContext(2d); /* 4、执行绘制fillRect(x,y,width,height) x,y*/ ctx.fillRect(10, 10, 100, 100); ctx.fillStyle #333; /script /body/html绘制线canvas 是一个二维网格canvas 的左上角坐标为 (0,0)上面的 fillRect 方法拥有参数 (0,0,100,,100)。意思是在左上角开始 (0,0)的位置绘制100*100的图形3.1路径在Canvas上画线我们将使用以下两种方法moveTo(x,y) 定义线条开始坐标lineTo(x,y) 定义线条结束坐标绘制线条我们必须使用到 link 的 stroke() 方法,执行绘制。下面我们来试一下在canvas中实现线的绘制3.2设置canvas元素!-- 1、设置canvas元素 -- canvas idcanvas width200 height200/canvas script3.3获取canvas元素
/* 2、获取canvas */const canvas document.getElementById(canvas);3.4获取上下文
/* 3、获取上下文 */const ctx canvas.getContext(2d);3.5设置起点和终点起点
/* 4、moveTo设置起点坐标 */ctx.moveTo(10, 10);终点
/* 5、设置终点坐标 lineTo */ctx.lineTo(100, 100);3.6执行绘制
/* 6、执行绘制 */ctx.strokeStyle #ff2d51;ctx.stroke();完整代码
!DOCTYPE htmlhtml langenhead meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title/headbody !-- 1、设置canvas元素 -- canvas idcanvas width200 height200/canvas script /* 2、获取canvas */ const canvas document.getElementById(canvas); /* 3、获取上下文 */ const ctx canvas.getContext(2d); /* 4、moveTo设置起点坐标 */ ctx.moveTo(10, 10); /* 5、设置终点坐标 lineTo */ ctx.lineTo(100, 100); /* 6、执行绘制 */ ctx.strokeStyle #ff2d51; ctx.stroke(); /script/body/html
