Canvas路径方向

使用Canvas路径画图需要注意方向，画图方向是顺时针还是逆时针需要记住。下面让我们看看Canvas常见路径方向。

  • arc

参数值

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

参数 描述
x 圆的中心的 x 坐标。
y 圆的中心的 y 坐标。
r 圆的半径。
sAngle 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle 结束角，以弧度计。
counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

圆的路径默认是顺时针

  • rect

context.rect(x,y,width,height);

矩形的创建

参数值

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

矩形和圆一样默认是按照顺时针方向绘制的，和绘制圆不同的是矩形没有指定绘制方向的参数。

原文地址：https://www.cnblogs.com/MyNodeJs/p/9614201.html

时间： 2024-11-13 11:07:24

Canvas路径方向的相关文章

Canvas路径、描边、填充

<script> var context = document.getElementById('canvas').getContext('2d'); context.font = '48pt Helvetica'; context.strokeStyle = 'blue';//边框颜色 context.fillStyle = 'red';//填充颜色 context.lineWidth = '2'; //画文字 context.strokeText('边框', 60, 110); contex

canvas - 路径

ie 8 不支持 canvas 路径方法 * 12 1.fill 2.stroke 3.beginPath 4.moveTo 5.closePath 6.lineTo 7.clip  //相当于选区,可以在此之前,先save 然后之后再restore 8.quadraticCurveTo 9.bezierCurveTo 10.arc 11.arcTo 12.isPointInPath //其中绘制路径有 6 个 moveTo(x,y) lineTo(x,y) arc(x,y,radius,sta

HTML5中的Canvas路径

画图也就是我们拿着笔在一张白纸上画图片一样,区别在与这支笔变成了canvas了. 我们平时画图想到什么画什么,可以涂鸦随便怎么样,那么可以开始了. 画图需要白纸吧,于是:(一些基本的用法我就不介绍了) <canvas id="canvas" width="500" height="500"></canvas> 这个就是了.了.有了白纸就要有拿起笔吧,那么: var canvas=document.getElementByI

Canvas——路径使用的一些感悟

路径使用的一些总结: moveTo()和lineTo()函数都是用来移动点,绘制路径的函数,绘制完成后,调用closePath()函数,它会创建一条由描点的终点通向起点的虚拟路径,闭合整个路径,然后调用stroke()函数进行描边,最后可以用fill()函数来填充样式. 简单的实例代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8">   <!--函数 S-->  

canvas路径剪切和判断是否在路径内

1.剪切路径 clip() var ctx=mycanvas.getContext('2d'); ctx.beginPath(); // 建一个矩形路径 ctx.moveTo(20,10) ctx.lineTo(100,10) ctx.lineTo(100,100) ctx.lineTo(20,100) ctx.closePath(); // 剪切 ctx.clip(); ctx.fillRect(0,0,50,50); 这句话的作用是,在这个画布上绘图时,只在clip()的这块路径区域内才st

html5 canvas路径绘制2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

canvas入门-2路径、文字

1.canvas是一个二维网格坐标系 2.canvas路径 <script type="text/javascript">//绘制矩形 var oCanvas = document.getElementById('canvas-1'); var context = oCanvas.getContext('2d');//指向2d渲染环境的引用 context.moveTo(0,0); context.lineTo(0,100); context.lineTo(100,100)

html5中canvas（2）

1.绘制图片(drawImage)(重点) 1.1 基本绘制图片的方式 context.drawImage(img, x, y); 参数: img 可以为:图片.视频或者canvas画布 x,y 绘制图片左上角的坐标, img是绘制图片的dom对象. 1.2 在画布上绘制图像,并规定图像的宽度和高度 context.drawImage(img, x, y, width, height); width:绘制到canvas中展示的宽度 如果指定宽高,最好成比例,不然图片会被拉伸 等比公式: toH

canvas的两个方法说明

今天在用canvas的时候,发现有两个方法比较陌生,在此记录详细说明一下. (1)文本绘制的一个方法 canvas.drawTextOnPath(text, path, hOffset, vOffset, paint) 参数说明:text是所绘制的文本 path是所绘制文本遵循的路径 hOffset是沿路径方向上的偏移量 vOffset是与路径方向垂直的那个方向上的偏移量 paint是画笔 为了彻底说明hOffset和vOffset的意思,你可以看下图: 红色箭头为文本绘制方向,那么hOffse