多用户建站系统源码,学做网站需要什么条件,搭建电商系统,中国铁建平台登录文章目录 一、什么是Canvas#xff1f;二、Canvas优缺点1.优点2.缺点3.检查浏览器是否支持Canvas。 三、坐标系四、绘制矩形1.Canvas支持两种方式来绘制矩形#xff1a;**矩形方法 和 路径方法**。2.Canvas 绘图的矩形方法#xff1a; 五、认识路径1. 什么是路径#xff1f… 文章目录 一、什么是Canvas二、Canvas优缺点1.优点2.缺点3.检查浏览器是否支持Canvas。 三、坐标系四、绘制矩形1.Canvas支持两种方式来绘制矩形**矩形方法 和 路径方法**。2.Canvas 绘图的矩形方法 五、认识路径1. 什么是路径2. 如何用路径绘制图形3.所需函数 六、路径-绘制直线七、路径-绘制三角形八、路径-绘制圆弧圆1. 绘制圆弧或者圆使用arc()方法2. 弧度计算3.案例 九、路径-绘制矩形 一、什么是Canvas
Canvas 最初由Apple于2004 年引入用于Mac OS X WebKit组件为仪表板小部件和Safari浏览器等应用程序提供支持。 后来它被Gecko内核的浏览器尤其是Mozilla FirefoxOpera和Chrome实现并被网页超文本应用技术工作小组提议 为下一代的网络技术的标准元素HTML5新增元素。 Canvas提供了非常多的JavaScript绘图API比如绘制路径、矩形、圆、文本和图像等方法与元素可以绘制 各种2D图形。
二、Canvas优缺点
1.优点
1.1 Canvas提供的功能更原始适合像素处理动态渲染和数据量大的绘制如图片编辑、热力图、炫光尾迹特效等。 1.2 Canvas非常适合图像密集型的游戏开发适合频繁重绘许多的对象。 1.3 Canvas能够以 .png 或 .jpg 格式保存结果图像适合对图片进行像素级的处理。
2.缺点
2.1 在移动端可以能会因为Canvas数量多而导致内存占用超出了手机的承受能力导致浏览器崩溃。 2.2 Canvas 绘图只能通过JavaScript脚本操作all in js。 2.3 Canvas 是由一个个像素点构成的图形放大会使图形变得颗粒状和像素化导致模糊。
3.检查浏览器是否支持Canvas。
测试 canvas.getContext() 方法的存在
三、坐标系 默认的坐标原点在元素左上角当然如我们上一节所讲 你可以通过形变改变坐标原点
四、绘制矩形
1.Canvas支持两种方式来绘制矩形矩形方法 和 路径方法。
1.1 路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。 1.2 除了矩形其他的图形都是通过一条或者多条路径组合而成的。 1.3 通常我们会通过众多的路径来绘制复杂的图形。
2.Canvas 绘图的矩形方法
2.1 fillRect(x, y, width, height) 绘制一个填充的矩形。 2.2 strokeRect(x, y, width, height) 绘制一个矩形的边框。 2.3 clearRect(x, y, width, height) 清除指定矩形区域让清除部分完全透明。 2.4 x 与 y 指定了在canvas画布上所绘制矩形的左上角相对于原点的坐标不支持 undefined 。
!DOCTYPE html
html langzh-CH
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}body {padding: 100px;margin: auto;}canvas {background-color: rgba(255, 0, 0, 0.1);}/style
/head
body!-- 如果不给宽高 默认宽300px 高150px --canvas idbox width300 height300您的浏览器不兼容Canvas请升级浏览器/canvasscriptwindow.onload function() {const canvasEl document.getElementById(box)console.log(%O, canvasEl);if (!canvasEl.getContext) return// 获取cancas渲染上下文let ctx canvasEl.getContext(2d) // 2d /webglconsole.log(ctx);// 在原点绘制一个填充的宽100px搞50px的矩形ctx.fillStyle green; // 不设置颜色时 默认为填充黑色如果需要设置颜色必须写在绘制元素的前面ctx.fillRect(0, 0, 100, 50)// 绘制描边的矩形// ctx.strokeStyle green;ctx.strokeRect(100, 100, 100, 50)// 清除指定区域的矩形// ctx.clearRect(0, 0, 50, 25)}/script
/body
/html五、认识路径
1. 什么是路径
1.1 图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。 1.2 路径是可由很多子路径构成这些子路径都是在一个列表中列表中所有子路径线、弧形等将构成图形。 1.3 一个路径甚至一个子路径通常都是闭合的。
2. 如何用路径绘制图形
2.1 首先需要创建路径起始点beginPath。 2.2 然后使用画图命令去画出路径( arc 、lineTo )。 2.3 之后把路径闭合( closePath , 不是必须)。 2.4 一旦路径生成就能通过描边(stroke)或填充路径区域(fill)来渲染图形。
3.所需函数
3.1 beginPath()新建一条路径生成之后图形绘制命令被指向到新的路径上绘图不会关联到旧的路径。 3.2 closePath()闭合路径之后图形绘制命令又重新指向到 beginPath之前的上下文中。 3.3 stroke()通过线条来绘制图形轮廓/描边针对当前路径图形。 3.4 fill()通过填充路径的内容区域生成实心的图形针对当前路径图形。
六、路径-绘制直线 !DOCTYPE html
html langzh-CH
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}body {padding: 100px;margin: auto;}canvas {background-color: rgba(255, 0, 0, 0.1);}/style
/head
body!-- 如果不给宽高 默认宽300px 高150px --canvas idbox width300 height300您的浏览器不兼容Canvas请升级浏览器/canvasscriptwindow.onload function() {const canvasEl document.getElementById(box)if (!canvasEl.getContext) returnlet ctx canvasEl.getContext(2d)// 0. 设置线条的属性(不设置 就会用默认的)// ctx.lineWitdh 10// ctx.strokeStyle green;// 1. 创建路径起点ctx.beginPath()// 2. 移动画笔(确定从哪里开始画)ctx.moveTo(0,10)// 绘制一条从当前位置到指定 (x y)位置的直线ctx.lineTo(100, 10)// 闭合路径不是必须写但建议写ctx.closePath()// 描边绘制线条只能用stroke不能用fillctx.stroke()}/script
/body
/html七、路径-绘制三角形 !DOCTYPE html
html langzh-CH
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}body {padding: 100px;margin: auto;}canvas {background-color: rgba(255, 0, 0, 0.1);}/style
/head
body!-- 如果不给宽高 默认宽300px 高150px --canvas idbox width300 height300您的浏览器不兼容Canvas请升级浏览器/canvasscriptwindow.onload function() {const canvasEl document.getElementById(box)if (!canvasEl.getContext) returnlet ctx canvasEl.getContext(2d)// 描边三角形ctx.beginPath()ctx.moveTo(50,0)ctx.lineTo(100, 50)ctx.lineTo(50, 100)// ctx.closePath()ctx.stroke()// 实心三角形ctx.beginPath()ctx.moveTo(150,0)ctx.lineTo(200, 50)ctx.lineTo(150, 100)// ctx.closePath()ctx.fill() //他会自动闭合路径}/script
/body
/html八、路径-绘制圆弧圆
1. 绘制圆弧或者圆使用arc()方法
1.1 arc(x, y, radius, startAngle, endAngle, anticlockwise)该方法有六个参数 ◼ x、y为绘制圆弧所在圆上的圆心坐标。 ◼ radius为圆弧半径。 ◼ startAngle、endAngle该参数用弧度定义了开始以及结束的弧度。这些都是以 x 轴为基准。 ◼ anticlockwise为一个布尔值。为 true 是逆时针方向为false是顺时针方向默认为false。
2. 弧度计算
◼ arc() 函数中表示角的单位是弧度不是角度。 ◼ 角度与弧度的 JS 表达式弧度( Math.PI / 180 ) * 角度 即 1角度 Math.PI / 180 个弧度 比如旋转90°Math.PI / 2 旋转180°Math.PI 旋转360°Math.PI * 2 旋转-90°-Math.PI / 2
3.案例 !DOCTYPE html
html langzh-CH
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}body {padding: 100px;margin: auto;}canvas {background-color: rgba(255, 0, 0, 0.1);}/style
/head
body!-- 如果不给宽高 默认宽300px 高150px --canvas idbox width300 height300您的浏览器不兼容Canvas请升级浏览器/canvasscriptwindow.onload function() {const canvasEl document.getElementById(box)if (!canvasEl.getContext) returnlet ctx canvasEl.getContext(2d)// 圆ctx.beginPath()ctx.arc(50, 50, 25, 0, Math.PI * 2, false)// ctx.closePath()ctx.stroke()// 填充圆ctx.beginPath()ctx.arc(150, 50, 25, 0, Math.PI * 2, false)// ctx.closePath()ctx.fill()// 圆弧ctx.beginPath()ctx.arc(150, 150, 25, 0, Math.PI, false)// ctx.closePath()ctx.stroke()}/script
/body
/html九、路径-绘制矩形
和上面的绘制矩形差不多就不加图片了
!DOCTYPE html
html langzh-CH
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}body {padding: 100px;margin: auto;background-image: url(../images/grid.png);}canvas {background-color: rgba(255, 0, 0, 0.1);}/style
/head
body!-- 如果不给宽高 默认宽300px 高150px --canvas idbox width300 height300您的浏览器不兼容Canvas请升级浏览器/canvasscriptwindow.onload function() {const canvasEl document.getElementById(box)if (!canvasEl.getContext) returnlet ctx canvasEl.getContext(2d)ctx.beginPath()// ctx.moveTo(0,0)ctx.rect(10, 10, 100, 50)// ctx.closePath()// ctx.stroke()ctx.fill()}/script
/body
/html
