canvas 设置拐角类型、裁切、曲线、转换等

最新推荐文章于 2024-08-05 16:35:45 发布
最新推荐文章于 2024-08-05 16:35:45 发布
阅读量2.3k 收藏 2
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010081689/article/details/50508920
版权

HTML：

 

<canvas id="myCanvas" width="500" height="300"></canvas>

 

 

1、createPattern() 方法在指定的方向内重复指定的元素

 

参数描述
image规定要使用的图片、画布或视频元素。
repeat默认。该模式在水平和垂直方向重复。
repeat-x该模式只在水平方向重复。
repeat-y该模式只在垂直方向重复。
no-repeat该模式只显示一次（不重复）。

 

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("zhaoliying");
var pat=ctx.createPattern(img,"repeat");
ctx.width = 500;
ctx.height = 300;
ctx.rect(0,0,ctx.width,ctx.height);
ctx.fillStyle=pat;
ctx.fill();

 

 

 

 

2、lineCap 属性设置或返回线条末端线帽的样式

 

值描述
butt默认。向线条的每个末端添加平直的边缘。
round向线条的每个末端添加圆形线帽。
square向线条的每个末端添加正方形线帽。

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = 10;
ctx.strokeStyle="green";
ctx.lineCap="round";
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(80,100);
ctx.stroke();

 

 

 

 

 

3、lineJoin 属性设置或返回所创建边角的类型，当两条线交汇时

 

值描述
bevel创建斜角。
round创建圆角。
miter默认。创建尖角。

 

 

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineJoin="round";
ctx.lineWidth = 10;
ctx.strokeStyle="green";
ctx.moveTo(20,20);
ctx.lineTo(100,50);
ctx.lineTo(20,100);
ctx.stroke();

 

 

 

 

4、clearRect() 方法清空给定矩形内的指定像素 （通常用来清空画布）

 

参数描述
x要清除的矩形左上角的 x 坐标
y要清除的矩形左上角的 y 坐标
width要清除的矩形的宽度，以像素计
height要清除的矩形的高度，以像素计

 

 

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="green";
ctx.fillRect(0,0,300,150);
ctx.clearRect(20,20,100,100);

 

 

 

 

5、miterLimit 属性设置或返回最大斜接长度（斜接长度指的是在两条线交汇处内角和外角之间的距离）

 

值描述
number

正数。规定最大斜接长度。

如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示。

 

 

 

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth=10;
ctx.strokeStyle= "green";
ctx.lineJoin="miter";
ctx.miterLimit=5;
ctx.moveTo(20,20);
ctx.lineTo(50,27);
ctx.lineTo(20,34);
ctx.stroke();

 

 

 

 

6、arcTo() 方法在画布上创建介于两个切线之间的弧/曲线

 

参数描述
x1弧的起点的 x 坐标
y1弧的起点的 y 坐标
x2弧的终点的 x 坐标
y2弧的终点的 y 坐标
r弧的半径

 

 

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.strokeStyle="green";
ctx.moveTo(20,20);           // 创建开始点
ctx.lineTo(100,20);          // 创建水平线
ctx.arcTo(150,20,150,70,50); // 创建弧
ctx.lineTo(150,120);         // 创建垂直线
ctx.stroke();                // 进行绘制

 

 

 

 

7、clip() 方法从原始画布中剪切任意形状和尺寸

 

提示：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。

 

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 剪切矩形区域
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// 在 clip() 之后绘制绿色矩形
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);

 

 

 

 

8、bezierCurveTo() 方法通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点

三次贝塞尔曲线

  • 开始点：moveTo(20,20)
  • 控制点 1：bezierCurveTo(20,100,200,100,200,20)
  • 控制点 2：bezierCurveTo(20,100,200,100,200,20)
  • 结束点：bezierCurveTo(20,100,200,100,200,20)

 

 

 

 

参数描述
cp1x第一个贝塞尔控制点的 x 坐标
cp1y第一个贝塞尔控制点的 y 坐标
cp2x第二个贝塞尔控制点的 x 坐标
cp2y第二个贝塞尔控制点的 y 坐标
x结束点的 x 坐标
y结束点的 y 坐标

 

 

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.strokeStyle="green";
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();

 

 

 

 

9、quadraticCurveTo() 方法通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点

二次贝塞尔曲线

  • 开始点：moveTo(20,20)
  • 控制点：quadraticCurveTo(20,100,200,20)
  • 结束点：quadraticCurveTo(20,100,200,20)

 

 

 

 

参数描述
cpx贝塞尔控制点的 x 坐标
cpy贝塞尔控制点的 y 坐标
x结束点的 x 坐标
y结束点的 y 坐标

 

 

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.strokeStyle="green";
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();

 

 

 

 

10、isPointInPath() 方法返回 true，如果指定的点位于当前路径中；否则返回 false

 

参数描述
x测试的 x 坐标
y测试的 y 坐标

 

 

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.rect(20,20,150,100);
if (ctx.isPointInPath(20,50)) {  // true
    ctx.stroke();
}

 

 

 

11、scale() 方法缩放当前绘图，更大或更小

 

参数描述
scalewidth缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)
scaleheight缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.)

 

 

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.strokeStyle="green";
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);

 

 

 

 

12、rotate() 方法旋转当前的绘图

 

参数描述
angle

旋转角度，以弧度计。

如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。

举例：如需旋转 5 度，可规定下面的公式：5*Math.PI/180。

 

 

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.fillStyle="green";
ctx.rotate(20*Math.PI/180);
ctx.fillRect(50,20,100,50);

 

 

 

 

13、translate() 方法重新映射画布上的 (0,0) 位置

 

参数描述
x添加到水平坐标（x）上的值
y添加到垂直坐标（y）上的值

 

 

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.fillStyle="green";
ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);

 

 

 

 

14、画布上的每个对象都拥有一个当前的变换矩阵

 

transform() 方法替换当前的变换矩阵。它以下面描述的矩阵来操作当前的变换矩阵：

a  c  e
b  d  f
0  0  1

 

 

 

context.transform(a,b,c,d,e,f);

 

 

 

 

参数描述
a水平缩放绘图
b水平倾斜绘图
c垂直倾斜绘图
d垂直缩放绘图
e水平移动绘图
f垂直移动绘图

 

 

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)

ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);

ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);

 

 

 

 

15、setTransform() 方法把当前的变换矩阵重置为单位矩阵

 

参数描述
a水平旋转绘图
b水平倾斜绘图
c垂直倾斜绘图
d垂直缩放绘图
e水平移动绘图
f垂直移动绘图

 

 

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100);

ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);

ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);

 

 

 

从上面可以看出红色的已经被重置成蓝色的了

 

16、measureText() 方法返回包含一个对象，该对象包含以像素计的指定字体宽度

 

参数描述
text要测量的文本。

 

 

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
var txt="Hello World"
ctx.fillText("width:" + ctx.measureText(txt).width,10,50)
ctx.fillText(txt,10,100);

 

 

 

 

欢迎关注分享录：http://fenxianglu.cn/

 

 

 

 

天空还下着雪
关注
专栏目录
canvas描边样式-lineJoin-拐角类型
caoxinjian423的博客
11-05 367
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>canvas描边样式-lineJoin</title> <style> html{h.
Canvas 教程：如何绘制带箭头的曲线
a76326791212的博客
10-24 2152
这篇文章要解决一个问题，就是给定 HTML 中任意一个点（起点）和另一个点（终点），绘制一条带箭头的曲线。 废话不多说，直奔主题。 我们只有两个点的相对偏移量（offset），思路就是以这两个点作为对角，创建一个绝对定位的 Canvas，然后在两点中绘制一条曲线（Curve），最后在终点处绘制箭头（Arrow）。 因此分为 3 步： 创建适当的 Canvas 绘制曲线 绘制箭头 创建适当的 Canvas 先确定 Canvas 的绝对定位偏移量，因为是任意两点，所以对角可能是左上加右下，也可能是左下加右上
html5 canvas 自定义画图裁剪图片
taoerchun的专栏
09-16 7533
html5 给我们带来了极大惊喜的canvas标签，有了它我们可以在浏览器客户端处理图片，不需要经过服务器周转。可以实现： 1、照片本地处理，ps有的一些基本功能都有 2、结合js可以实现一些很炫的动画效果 实现一个微信上发图片消息的效果最终效果图： 下面我们先介绍canvas一些基本的用法，这里可能需要一些基本的几何知识，对小伙伴们来说应该不是问题
canvas初学笔记（万字详细版）
最新发布
懒羊羊大王的博客
08-05 919
canvas初学笔记，万字超详细版（附带实战源码）
canvas实现图片裁剪
huqiut的博客
07-15 490
canvas实现图片裁剪
canvas、svg画直线或者带弧度的弯道直线，渐变线
12-25
可根据需求自定义参数 可根据需求自定义参数 可根据需求自定义参数 可根据需求自定义参数 可根据需求自定义参数 可根据需求自定义参数
快速转弯html5,【HTML5发射效果--会转弯】HTML5 Canvas 路径问题
weixin_34963576的博客
06-24 75
该楼层疑似违规已被系统折叠隐藏此楼查看此楼Draw a Circlebody {background-color: #000000;margin: 0px;overflow: hidden;}varcanvas = document.createElement( 'canvas' ),context = canvas.getContext( '2d' );var canvasWidth = wi...
HTML5 canvas 图片裁剪 图片裁切
10-30
7. **导出图片**：最后，可以使用`toDataURL()`方法将canvas转换为data URL，用户可以下载或者继续在其他地方使用这个裁剪后的图片。 在项目中，`cutImage`可能包含了实现这些功能的JavaScript代码，包括事件监听、...
android canvas 画曲线图 画三角形（多边形）
06-14
Path可以记录一系列的路径操作，包括移动、直线、曲线等。先创建Path对象，然后调用`path.moveTo()`开始路径，接着用`path.lineTo()`添加线段，最后用`canvas.drawPath(path, paint)`绘制Path。 示例代码： ```...
canvas动态绘制曲线（类似与流动绘制任意曲线）
dl425134845的专栏
11-26 1464
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>canvas动态绘制曲线</title> </style> </head> <body> <div class="wide-page-background"> <canvas id="tutorial" width="1600" heigh.
Canvas绘制曲线
Meskjei的博客
07-04 5686
文章目录圆弧贝塞尔曲线 圆弧 圆弧使用arc方法绘制，画圆的时候画的弧度是从0到2π，而想要画圆弧就调整参数只画出部分圆即可。 const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); ctx.arc(100, 100, 100, 0, Math.PI / 2); ctx.strok...
canva画图 图片居中裁剪_html5 canvas 自定义画图裁剪图片
weixin_39912163的博客
12-20 630
html5 给我们带来了极大惊喜的canvas标签，有了它我们可以在浏览器客户端处理图片，不需要经过服务器周转。可以实现：1、照片本地处理，ps有的一些基本功能都有2、结合js可以实现一些很炫的动画效果这篇文章实现一个微信上发图片消息的效果最终效果图：下面我们先介绍canvas一些基本的用法，这里可能需要一些基本的几何知识，对小伙伴们来说应该不是问题1、创建一个canvasvar canvas=d...
canvas09:lineJoin属性与设置折线拐点样式
蜡笔love小新的博客
04-23 1396
lineJoin：设置两条线相交的拐点的样式。属性值为“bevel”、“round”、“miter”。 属性值 作用 bevel 创建斜角 round 创建圆角 miter 默认，尖角 案例： 绘制三条折线，并设置不同的拐点样式，比较不同。 代码： <!DOCTYPE html> <html lang="en"&gt...
小程序canvans生成倒角矩形
weixin_43977067的博客
11-29 355
废话不多说，直接上代码 /** * 绘制圆角矩形 * @param {Object} ctx - canvas组件的绘图上下文 * @param {Number} x - 矩形的x坐标 * @param {Number} y - 矩形的y坐标 * @param {Number} w - 矩形的宽度 * @param {Number} h - 矩形的高度 * @param {Number} r - 矩形的圆角半径 * @param {String} [c = 'transparent']
小程序canvans生成倒角边框矩形
weixin_43977067的博客
11-29 311
/** * 绘制圆角边框矩形 * @param {Object} ctx - canvas组件的绘图上下文 * @param {Number} x - 矩形的x坐标 * @param {Number} y - 矩形的y坐标 * @param {Number} w - 矩形的宽度 * @param {Number} h - 矩形的高度 * @param {Number} r - 矩形的圆角半径 * @param {String} [c = 'transparent'] - 矩形的边框填充色 .
原生js+canvas实现裁剪图片的功能
王光
12-22 8590
本文是利用一个css的属性clip，我肯定有很多人都不知道这个属性，因为这个属性用到的太少了，只是在特定的条件下才会用到这个属性。这里我就跟大家大致的说一下它的用法，想要了解更多这个属性的可以去查阅一下资料，在这里跟不跟大家说了。这里主要是讲如何利用这个属性实现选取图片的功能。 想要了解clip 这个属性，首先要知道这个属性的语法：clip：rect（top，right，bottom，left）...
canvas基础2 - arc - 画弧线
许小叮当的博客
06-13 1513
本文是canvas基础2 - arc - 画弧线，通俗易懂，小白也没烦恼，根据慕课网liuyubobobo老师的视频课学习整理
Canvas图像变形处理
星星有所不知
03-22 3476
Canvas图像变形处理 1. translate(x, y);//用来移动canvas的坐标原点到指定的位置 参数说明： 1. x 是左右偏移量 2. y 是上下偏移量 建议：在做变形之前，先保存当前状态，便于之后恢复 2. rotate(angle);//旋转坐标轴 参数说明： angle:旋转的角度，顺时针方向，以弧度为单位 ...
html期末考试绘制直线,html5教程 （二）（canvas绘制简单的直线）
weixin_35662670的博客
05-30 241
Html5_convasvar elem = document.getElementById("myConvas");if (elem && elem.getContext) {var myContext = elem.getContext("2d");/*通过 fillStyle和 strokeStyle 属性可以轻松的设置矩形的填充和线条。颜色值使用方法和 CSS 一样：十六进...
Canvas进阶：平滑曲线绘制技巧揭秘
本文将深入探讨Canvas API在绘制过程中如何克服锯齿问题，实现平滑曲线的绘制技巧。Canvas作为HTML5中的一个重要绘图接口，其默认的线条绘制可能存在边缘不连续的锯齿现象，这在某些场景下可能影响用户体验，特别是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

天空还下着雪

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值