视频网站的广告能怎么做,网页制作基础与实例教程,网站建设带后台,苏州注册公司网上核名canvas 入门 canvas是干什么的#xff1f;canvas 绘制直线canvas画虚线canvas 绘制三角形canvas 绘制正方形canvas 绘制圆形、圆弧与椭圆canvas绘制文本canvas绘制图片 canvas是干什么的#xff1f; canvas 是HTML5中的标签#xff0c;它是一个容器#xff0c;可以… canvas 入门 canvas是干什么的canvas 绘制直线canvas画虚线canvas 绘制三角形canvas 绘制正方形canvas 绘制圆形、圆弧与椭圆canvas绘制文本canvas绘制图片 canvas是干什么的 canvas 是HTML5中的标签它是一个容器可以使用JS在其中绘制图形或文字。所以我们把重点放在绘制图的api上。 关于canvas的宽高 一般来说通过标签属性来自定义宽高通过css设置会失帧。 关于canvas画画的方向 Canvas 使用的是 W3C 坐标系 也就是遵循我们屏幕、报纸的阅读习惯从上往下从左往右。 canvas 绘制直线
初体验通过起始点与折点画线
!-- 创建canvas标签 --
canvas idcanvas height600 width700/canvasscript// 使用JS获得这个canvas标签的DOM对象const canvas document.getElementById(canvas)// 决定是画二维还是三维的画const ctx canvas.getContext(2d)// 定义画线的起始点ctx.moveTo(20, 100)// 定义画线的折点ctx.lineTo(100, 100)// 通过线条来绘制图形轮廓ctx.stroke()
/script 使用ctx.beginPath() 与 ctx.closePath()。来分隔画的线防止样式覆盖。 设置线条的样式可以设置宽度、颜色、透明度等等。具体看api !-- 关于canvas的定义canvas 是HTML5中的标签它是一个容器可以使用JS在其中绘制图形或文字。 --!-- 关于canvas的宽高可以通过标签属性来自定义宽高通过css设置会失帧不如直接定义。 --!-- 关于canvas画画的方向Canvas 使用的是 W3C 坐标系 也就是遵循我们屏幕、报纸的阅读习惯从上往下从左往右。--!-- 创建canvas标签 --
canvas idcanvas height600 width700/canvas
script// 使用JS获得这个canvas标签的DOM对象const canvas document.getElementById(canvas)// 决定是画二维还是三维的画const ctx canvas.getContext(2d)// 定义画线的起始点ctx.moveTo(20, 100)// 定义画线的折点ctx.lineTo(100, 100)// 通过线条来绘制图形轮廓ctx.stroke()// 绘制第二条ctx.moveTo(10, 300)ctx.lineTo(100, 300)ctx.lineTo(100, 200)ctx.lineTo(200, 200)ctx.lineTo(200, 300)ctx.lineTo(300, 300)ctx.lineTo(300, 200)ctx.lineTo(400, 200)ctx.lineTo(400, 300)ctx.lineTo(500, 300)ctx.stroke()// 绘制线的样式设置后整个canvas都使用这个样式// 设置线的宽度ctx.lineWidth 10 // 设置线的颜色ctx.strokeStyle skybluectx.stroke()// 设置后整个canvas都一个颜色明显不符合我们的需求。// 所以需要使用ctx.beginPath() 与 ctx.closePath()。// 所以上面的线都是一个样式。ctx.beginPath()ctx.moveTo(100, 400)ctx.lineTo(100, 700)// 设置线的颜色ctx.strokeStyle redctx.stroke()ctx.beginPath()ctx.moveTo(300, 400)ctx.lineTo(300, 700)// 设置线的颜色ctx.strokeStyle greenctx.stroke()// 还有一些其他的样式//strokeStyle 颜色设置线的颜色//lineWidth 数字设置线的宽度//lineCap round/butt/square设置线帽为圆型/默认/方形//lineJoin miter/round/bevel设置线段连接处为默认/圆形/平直形式//globalAlpha 数字设置图案的透明度/script
canvas画虚线 与画实线类似多了一个函数setLineDash()用于设置虚线的透明线段。 setLineDash()可以有多个参数。 一个参数就是设置透明的线段。 多个参数的时候偶数代表实线奇数代表透明度 canvas idcanvas height600 width700/canvas
scriptcanvas document.getElementById(canvas);ctx canvas.getContext(2d)// 画虚线ctx.beginPath()ctx.lineWidth 10ctx.strokeStyle skybluectx.moveTo(200, 200)ctx.lineTo(500, 200)// 10个虚线点ctx.setLineDash([10])ctx.stroke()ctx.beginPath()ctx.moveTo(200, 300)ctx.lineTo(500, 300)// 下标为偶数的项为实线为奇数项为透明线段数字的大小代表着线段的长度。// 第一个是1/4第二个是3/4ctx.setLineDash([10, 30])ctx.stroke()ctx.beginPath()ctx.moveTo(200, 400)ctx.lineTo(500, 400)// 下标为偶数的项为实线为奇数项为透明线段数字的大小代表着线段的长度.// 第一、二、三个分别是2/9、 2/3、 1/9 ctx.setLineDash([10, 30, 5])ctx.stroke()
/script
canvas 绘制三角形 画三角形的原理就是画几条线然后连接到一块 !-- 创建canvas标签 --
canvas idcanvas height600 width700/canvas
script// 画三角形的原理就是画几条线然后连接到一块const canvas document.getElementById(canvas)const ctx canvas.getContext(2d)ctx.beginPath()ctx.moveTo(200, 200) ctx.lineTo(500, 200)ctx.lineTo(500, 500)// 第四个点要和第一个点的坐标一致才能画出三角形ctx.lineTo(200, 200)// 设置线段颜色为红色ctx.strokeStyle red ctx.stroke()ctx.closePath()
/scriptcanvas 绘制正方形 矩形分为空心矩形 与 实心矩形。 实心矩形通过 fillStyle 属性来填充。 空心矩形的两种实现方式 一 用直线硬画 二 用相应的api !-- 创建canvas标签 --!-- 空心矩形实现方式是画线条 --
canvas idcanvas height600 width700/canvas!-- 填充矩形实现方式 fillStyle 颜色 且使用 fillRect() --
scriptconst canvas document.getElementById(canvas)const ctx canvas.getContext(2d)// 画空心矩形// 方法一用画线的方式ctx.beginPath()ctx.moveTo(200, 150)ctx.lineTo(500, 150)ctx.lineTo(500, 450)ctx.lineTo(200, 450)ctx.lineTo(200, 150)ctx.stroke()ctx.closePath()// 方法二用画矩形的函数// 起点为(20,15)宽400像素高400像素ctx.beginPath()ctx.strokeRect(20, 15, 400, 400) ctx.closePath()// 画填充矩形ctx.beginPath()ctx.fillStyle redctx.fillRect(50, 60, 100, 100) ctx.closePath()
/scriptcanvas 绘制圆形、圆弧与椭圆 使用arc(x, y, radius, startAngle, endAngle, anticlockwise)方法生成⚪/⌒。 canvas idcanvas height600 width700/canvas
canvas idcanvas2 height600 width700/canvas
scriptconst canvas document.getElementById(canvas)const ctx canvas.getContext(2d)ctx.beginPath()// 使用arc(x, y, radius, startAngle, endAngle, anticlockwise)方法生成⚪/⌒。// 再使用stroke()方法绘制圆。// 不写anticlockwise项的话默认为顺时针ctx.arc(350, 300, 150, 0, [(Math.PI) / 180] * 360) // 如果此处改为使用fill()方法那么将会绘制出填充的圆ctx.stroke() ctx.closePath()const canvas2 document.getElementById(canvas2)const ctx2 canvas2.getContext(2d)// 画一个圆弧ctx2.beginPath();ctx2.arc(350, 300, 150, 0, [(Math.PI) / 180] * 300, true) // (Math.PI) / 180 1°ctx2.stroke() ctx2.closePath()// 画圆弧的第二种方式// 定义线段的起点ctx2.beginPath();ctx2.moveTo(200, 300)// 切线交点坐标为(400,100)结束点为(400,500)ctx2.arcTo(400, 100, 400, 500, 100) ctx2.lineWidth 2ctx2.stroke()ctx2.closePath()
/script
画椭圆也用对应的api即可
canvas idcanvas height600 width700/canvas
scriptconst cnv document.getElementById(canvas)const ctx cnv.getContext(2d)ctx.ellipse(350, 300, 100, 200, [(Math.PI) / 180] * 60, [(Math.PI) / 180] * 0, [(Math.PI) / 180] * 360, false)ctx.fillStyle skybluectx.fill()
/script
canvas绘制文本
canvas idcanvas height600 width700/canvas
scriptconst canvas document.getElementById(canvas)const ctx canvas.getContext(2d)ctx.beginPath()ctx.font 50px Verdana;// strokeText(Text,left,top,[maxlength])ctx.strokeText(Hello Canvas!, 180, 320, 400)ctx.closePath()ctx.beginPath()ctx.font 50px Verdana// strokeText(Text,left,top,[maxlength])ctx.fillText(Hello Canvas!, 180, 420, 400)ctx.closePath()// 设置文本样式// .font方法可以设置文本大小和字体// .textAlign设置文本的对齐方式可选left/right/center/start/end// textBaseline决定了文本在垂直方向的对齐方式可选alphabetic/top/hanging/middle/ideographic/bottom// .direction设置文本的绘制方向可选ltr(left to right)和rtl(right to left)// 右对齐文本ctx.beginPath()ctx.font 40px serifctx.textAlign rightctx.direction ltrctx.strokeText(Hello Canvas!11, 350, 250, 400)ctx.beginPath()/scriptcanvas绘制图片
canvas idcanvas height600 width700/canvas
scriptvar canvas document.getElementById(canvas);var ctx canvas.getContext(2d);// 创建一个图片对象var img new Image();img.src http://panpan.dapanna.cn//image-20221009113426344.png;// 图片加载完成之后绘制图片img.onload function () {ctx.drawImage(img, 0, 0); // 在(0,0)处绘制原图}
/script
