canvas二:绘制圆和其他曲线
1.绘制圆
绘制圆是canvas里面不可缺少的功课,而且绘制圆在canvas中的用处很多,好嘞,开扯
绘制圆需要用到arc这个方法:
arc(X坐标,Y坐标,半径,起始弧度,结束弧度,旋转方向);
弧度与角度的关系:弧度 = 角度*Math.PI/180;
旋转方向:true(逆时针),false(顺时针),默认为顺时针;
实例:我想画一个半圆,先里一下思路,首先我们需要一个区域,也就是绘制路径,即beginPath,
然后我们再需要定义一个开始的绘制点,即moveTo,之后在进行绘圆操作,那么arc里面的参数我们改怎样设置呢,其中,X,Y和绘制起始点的坐标是一样的,半径最好不要太大,以免超过画布,就给个100吧,起始弧度可以为0,然后这个时候的结束弧度为180度,即180*Math.PI/180。你以为这样就结束了吗,图森图样破,我们还需要闭合啊,善始善终哈,来个闭合oGC.closePath();最后进行描线操作就OK了,oGC.stroke();
- var oC = document.getElementById("c1");
- var oGC = oC.getContext("2d");
- oGC.beginPath();
- oGC.moveTo(200,200);
- oGC.arc(200,200,100,0,180*Math.PI/180,false);
- oGC.closePath();
- oGC.stroke();
效果如图:
2.绘制其他曲线
- 曲线:arcTo(x1,y1,x2,y2,r):第一组数据坐标,第二组数据坐标,半径
贝塞尔曲线1:quadraticCurveTo(dx,dy,x1,x2):第一组控制点,第二组结束坐标;
贝塞尔曲线1:bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1):第一组控制点,第二组控制点,第三组结束坐标
- oGC.save();
- oGC.strokeStyle = "red";
- oGC.beginPath();
- oGC.moveTo(100,200);
- oGC.arcTo(100,150,200,100,50);
- oGC.stroke();
- oGC.restore();
效果如下图:
哈哈,是不是以为这样就结束了,还没有,我们在了解了绘制圆以后,就可以实现其他的许多功能了,比如绘制一个时钟(实时更新),和圆拱形的路径。这个随笔有点儿杂了,我决定另起一篇做它们,哼。
canvas二:绘制圆和其他曲线的更多相关文章
- 【Canvas】绘制几何级数Geometric series曲线 y=1+1/2+1/4+1/8+1/16+1/32+1/64+....
相关资料:https://baike.baidu.com/item/%E5%87%A0%E4%BD%95%E7%BA%A7%E6%95%B0/112584?fr=aladdin 图线: 代码: < ...
- Flutter 35: 图解自定义 View 之 Canvas (二)
小菜前几天整理了以下 Canvas 的部分方法,今天小菜继续学习 Canvas 第二部分. drawXXX drawShadow 绘制阴影 drawShadow 用于绘制阴影,第一个参数时绘制一个图形 ...
- HTML5 canvas标签绘制正三角形 鼠标按下点为中间点,鼠标抬起点为其中一个顶点
用html5的canvas标签绘制圆.矩形比较容易,绘制三角形,坐标确定相当于前面两种难点,这里绘制的是正三角形,比较容易,我们只需要把鼠标刚按下去的点设置为三角形的中心点,鼠标抬起的点设置为三角形右 ...
- canvas学习(二):渐变与曲线的绘制
canvas学习(二):渐变与曲线的绘制 一:createLinearGradient()线性渐变: 二:createLinearGradient() 放射状/圆形渐变: 三:createPatter ...
- 基于canvas二次贝塞尔曲线绘制鲜花
canvas中二次贝塞尔曲线参数说明: cp1x:控制点1横坐标 cp1y:控制点1纵坐标 x: 结束点1横坐标 y:结束点1纵坐标 cp2x:控制点2横坐标 cp2y:控制点2纵坐标 z:结束点2横 ...
- canvas基础[二]教你编写贝塞尔曲线工具
贝塞尔曲线 bezierCurveTo 在线工具 https://canvature.appspot.com/ [感觉这个好用一些] https://blogs.sitepointstatic.com ...
- [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)
之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...
- Canvas中绘制贝塞尔曲线
① 什么是贝塞尔曲线? 在数学的数值分析领域中,贝济埃曲线(英语:Bézier curve,亦作“贝塞尔”)是计算机图形学中相当重要的参数曲线.更高维度的广泛化贝济埃曲线就称作贝济埃曲面,其中贝济埃三 ...
- 带着canvas去流浪系列之二 绘制折线图
[摘要] 用canvasAPI实现echarts简易图表 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...
随机推荐
- Android集成银联支付,提示java.lang.UnsatisfieldLinkError错误
尽管解决方法很简单,但还是记录一下吧. 最近做银联支付(Android),官方给的demo是eclipse的.按照官方(https://open.unionpay.com/ajweb/product) ...
- 【WPF】获取下拉列表(ComboBox)的选项(ComboBoxItem)的内容
需求:给下拉列表ComboBox注册一个选项改变时触发的事件,想要获取到当前选中的选项的内容. // 给ComboBox注册一个选项改变的事件 myComboxBox.SelectionChanged ...
- 【WPF】一组CheckBox的全选/全不选功能
需求:给一组CheckBox做一个全选/全不选的按钮. 思路:CheckBox不像RadioButton那样拥有GroupName属性来分组,于是我想的方法是将这组CheckBox放到一个布局容器中, ...
- 应用层timer_libc_posix timer
应用层除了通过setitimer/getitimer设置获取timer外,还可通过timer_create()等一系列函数实现应用层timer功能. 应用流程 The timers created b ...
- 关于Unity中stretch的分开使用、预制体、Scroll View的UI节点
一.上次讲的菊花的四个花瓣,只讲了四个花瓣和在一起的时候的作用,现在是分开的菊花的四个花瓣的作用 1.创建一个Canvas2.对Canvas进行初始化3.创建一个Image的UI节点作为Canvas的 ...
- 解析 Spring ConversionService
弄了张图,方便以后一眼能想起是怎么回事. 前提,看这里:Spring Framework 官方文档学习(四)之Validation.Data Binding.Type Conversion(二) .
- 第三百节,python操作redis缓存-其他常用操作,用于操作redis里的数据name,不论什么数据类型
python操作redis缓存-其他常用操作,用于操作redis里的数据name,不论什么数据类型 delete(*names)根据删除redis中的任意数据类型 #!/usr/bin/env pyt ...
- 帝国cms的list.var中使用php函数
$r[title] = esub($r[title],8,'...'); //截取前8个字符,多出部分用...代替 $r[title] = str_replace("lhj",&q ...
- linux -- chown修改文件拥有者和所在组
chown将指定文件的拥有者改为指定的用户或组,用户可以是用户名或者用户ID:组可以是组名或者组ID:文件是以空格分开的要改变权限的文件列表,支持通配符.系统管理员经常使用chown命令,在将文件拷贝 ...
- Sublime Text 3安装清爽主题(著名的Soda Theme)
Sublime Text是一款强大的编辑器,不但拥有众多强大的功能,还拥有很多漂亮的主题以及大量的插件可供配置使用. 本文主要描述Sublime Text 3安装清爽的主题,默认的深色主题Monoka ...