做网站最好的公冻品网站建设

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

做网站最好的公,冻品网站建设,模板网站定制,wordpress死链自动提交文章目录 一、基本用法二、用法详见2.0、方法属性2.1、绘制线条2.2、绘制矩形2.3、绘制圆形2.4、绘制文本2.5、填充图像 一、基本用法 canvas 标签#xff1a;可用于在网页上绘制图形#xff08;使用 JavaScript 在网页上绘制图像#xff09;画布是一个矩形区域#xff0c… 文章目录 一、基本用法二、用法详见2.0、方法属性2.1、绘制线条2.2、绘制矩形2.3、绘制圆形2.4、绘制文本2.5、填充图像 一、基本用法 canvas 标签可用于在网页上绘制图形使用 JavaScript 在网页上绘制图像画布是一个矩形区域通过控制其每一像素绘制路径、矩形、圆形、字符以及添加图像。创建一个canvaswidth 和 height 是必备属性id 是为了在 js 中获取改元素。 canvas idmyCanvas width200 height100/canvas在 js 中绘制 canvas script typetext/javascript // 通过 id 查找到 canvas 元素 var c document.getElementById(myCanvas); // 创建 context 对象 var cxt c.getContext(2d); // 绘制矩形前2个参数为在canvas里面的矩形左上角起点坐标第3个参数是宽第4个参数是高 cxt.fillRect(0,0,150,75); // 填充颜色 cxt.fillStyle#FF0000; /script二、用法详见 2.0、方法属性 context 对象属性 属性描述fillStyle设置或返回用于填充绘图的颜色、渐变或图案。strokeStyle设置或返回用于笔划的颜色、渐变或图案。shadowColor设置或返回用于阴影的颜色。shadowBlur设置或返回阴影的模糊级别。shadowOffsetX设置或返回阴影到形状的水平距离。shadowOffsetY设置或返回阴影到形状的垂直距离。 context 对象方法 方法描述fill()填充当前图形路径。stroke()实际上绘制您定义的路径。beginPath()开始路径或重置当前路径。closePath()创建从当前点返回起点的路径。 2.1、绘制线条 线条方法 方法描述绘制moveTo()划线起始点否lineTo()画线到另一个点否 canvas idmyCanvas width200 height100 styleborder:1px solid #c3c3c3;/canvas script typetext/javascript // 通过 id 查找到 canvas 元素 var c document.getElementById(myCanvas); // 创建 context 对象 var cxt c.getContext(2d); // 线条起点坐标 cxt.moveTo(10,10); // 折点坐标 cxt.lineTo(150,50); // 折点坐标 cxt.lineTo(10,50); // 绘制当前或已经存在的路径的方法 cxt.stroke(); /script专有属性 属性描述值lineWidth绘制时要使用的线条宽度像素lineCap定义线的端部样式round圆形 square方形、butt平直默认值lineJoin设置或返回两条线相交时创建的角的类型bevel斜角、round圆角 miter尖角默认值 ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(200, 100); ctx.lineWidth 10; ctx.strokeStyle red; ctx.lineCap round; ctx.stroke();2.2、绘制矩形 fillRect() 方法向路径添加一个填充的矩形 context.fillRect(x, y, width, height)strokeRect() 方法向路径添加一个无填充矩形 context.fillRect(x, y, width, height)rect() 方法向路径添加一个矩形 context.rect(x, y, width, height)

1. strokeRect(30, 30, 50, 50) 等价于ctx.rect(30, 30, 50, 50);ctx.stroke();
2. fillRect(30, 30, 50, 50) 等价于ctx.rect(30, 30, 50, 50);ctx.fill();参数描述x矩形左上角的 x 坐标。y矩形左上角的 y 坐标。width矩形的宽度以像素为单位。height矩形的高度以像素为单位。 const canvas document.getElementById(myCanvas); const ctx canvas.getContext(2d);// 红色矩形 ctx.beginPath(); ctx.lineWidth 6; ctx.strokeStyle red; ctx.fillStyle yellow // 在 strokeRect 中不生效 ctx.strokeRect(5, 5, 290, 140);// 绿色矩形 ctx.beginPath(); ctx.lineWidth 4; // 在 fillRect 中不生效 ctx.strokeStyle green; // 在 fillRect 中不生效 ctx.fillStyle yellow ctx.fillRect(30, 30, 50, 50);2.3、绘制圆形 arc() 方法向路径添加一个圆形 context.arc(x,y,r,start,end) 参数描述x圆心的x轴坐标y圆心的y轴坐标r圆弧的半径start圆弧的起始点end圆弧的终点 canvas idmyCanvas width200 height100 styleborder:1px solid #c3c3c3;/canvas script typetext/javascript // 通过 id 查找到 canvas 元素 var c document.getElementById(myCanvas); // 创建 context 对象 var cxt c.getContext(2d); // 填充颜色 cxt.fillStyle#FF0000; // 创建一个新的路径 cxt.beginPath(); // 绘制圆弧路径的方法圆心的x轴坐标圆心的y轴坐标圆弧的半径圆弧的起始点圆弧的终点true逆时针绘制圆弧false顺时针绘制 cxt.arc(70,18,15,0,Math.PI*2,true); // 返回到当前路径起始点的方法 cxt.closePath(); // 填充当前或已存在的路径的方法 cxt.fill(); /script2.4、绘制文本 fillText(text,x,y)在画布上绘制“填充的”文本 const canvas document.getElementById(myCanvas); const ctx canvas.getContext(2d);ctx.font 30px Arial; ctx.fillText(Hello World, 10, 50);strokeText(text,x,y)在画布上绘制文本无填充 const canvas document.getElementById(myCanvas); const ctx canvas.getContext(2d);ctx.font 30px Arial; ctx.strokeText(Hello World, 10, 50);专有属性 属性描述font设置或返回文本内容的当前字体属性。textAlign设置或返回文本内容的当前对齐方式。textBaseline设置或返回绘制文本时使用的当前文本基线。 font 属性使用的语法与 CSS font 属性相同。 textAlign 属性
   值描述start默认。文本在指定的位置开始。end文本在指定的位置结束。center文本的中心被放置在指定的位置。left文本左对齐。right文本右对齐。 textBaseline 属性
   值描述alphabetic默认。文本基线是普通的字母基线。top文本基线是 em 方框的顶端。hanging文本基线是悬挂基线。middle文本基线是 em 方框的正中。ideographic文本基线是表意基线。bottom文本基线是 em 方框的底端。 2.5、填充图像 canvas idmyCanvas width200 height100 styleborder:1px solid #c3c3c3;/canvas script typetext/javascript // 通过 id 查找到 canvas 元素 var c document.getElementById(myCanvas); // 创建 context 对象 var cxt c.getContext(2d); var img document.getElementById(scream); // 放置图片 图片image的左上角在目标画布上X轴坐标image的左上角在目标画布上Y轴坐标 ctx.drawImage(img, 10, 10) /script