html坐标绘制路径,canvas学习笔记之绘制简单路径

1 线段(直线路径)

绘制线段一般步骤:

moveTo(x,y) 移动画笔到指定的坐标点(x,y)

lineTo(x,y) 使用直线连接当前端点和指定的坐标点(x,y)

stroke() 根据当前的画线样式，绘制当前或已经存在的路径

2 矩形路径

绘制矩形路径一般步骤:

rect(x, y, width, height) 矩形路径，坐标点(x,y)，width height宽高

stroke()或fill 根据当前的样式，绘制或填充路径

也可使用前文提到的strokeRect或fillRect, 或者是通过lineTo拼接成矩形

3 圆弧路径

先看下绘制圆弧的api:

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

x, y 圆弧中心， radius 圆弧半径, startAngle 起始点, endAngle 圆弧终点, anticlockwise 默认为顺时针, true逆时针

CSS中做旋转用到都是角度(deg)，但是arc函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式: 弧度 = (Math.PI/180) * 角度(deg)。

这里弧度是以x轴正方向为基准、默认顺时针旋转的角度来计算

图示：

(图片来自大漠)

ctx.beginPath();

ctx.arc(200, 100, 100, 0, Math.PI / 2, false);

ctx.closePath();

ctx.stroke();

ctx.fill();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

html坐标绘制路径,canvas学习笔记之绘制简单路径相关推荐

python用函数绘制椭圆_Python学习笔记——opencv绘制椭圆
在Python环境下使用opencv绘制椭圆,需要用到cv2.ellipse() 函数. 下面一段示例程序就是用该函数在黑色背景下,绘制一个圆心在(260,240).长轴170.短轴130.线宽为3的 ...
canvas学习笔记
canvas学习笔记 canvas API中文网 - Canvas API中文文档首页地图使用canvas来绘制图形 - Web API 接口参考 | MDN 什么是Canvas? Canvas是H ...
Canvas学习笔记之画线
Canvas学习笔记之画线步骤 1.使用getElementById()获取canvas元素. 2.获取canvas的绘制环境getContext(). 3.进行绘制画笔的粗细和颜色定义,分别是li ...
Canvas 学习笔记1
#Canvas 学习笔记1 @[Canvas,Nunn,HTML5,javascript] ##前言相信大家多多少少都有了解过`Canvas`,这里我就不多做解释了,网上也充斥了这方面的知识,很多人 ...
Adobe Illustrator学习笔记一 – 绘制K33图
Adobe Illustrator学习笔记一 – 绘制图论中的K33图作者: kagula 时间 2020-11-14 概要阅读对象为非美工专业的计算机程序员, 所以对程序员来说显而 ...
Java NIO 学习笔记（五）----路径、文件和管道 Path/Files/Pipe
目录: Java NIO 学习笔记(一)----概述,Channel/Buffer Java NIO 学习笔记(二)----聚集和分散,通道到通道 Java NIO 学习笔记(三)----Select ...
【学习笔记】求解简单递归式的一般方法
[学习笔记]求解简单递归式的一般方法手动博客搬家: 本文发表于20180618 15:53:06, 原地址https://blog.csdn.net/suncongbo/article/detail ...
PHP学习笔记03：简单网上调查站点
PHP学习笔记03:简单网上调查站点网上调查站点由两个页面构成.第一个页面(vote.html文件)是一份问卷,问卷上只有一个问题"开发MySQL应用程序你最喜欢哪种编程语言?" ...
Flutter学习笔记 —— 完成一个简单的新闻展示页
Flutter学习笔记 -- 完成一个简单的新闻展示页前言思路分析案例代码结束语上图前言刚学Flutter不久,今天我们来看看如何使用 Container & ListView实 ...

html坐标绘制路径,canvas学习笔记之绘制简单路径

html坐标绘制路径,canvas学习笔记之绘制简单路径相关推荐

最新文章

热门文章