uniapp实现canvas画倾斜的圆
好家伙为了画这个椭圆我可真的是煞费苦心
首先在uni的canvas里面是没有画椭圆的函数的,想要实现椭圆有很多种方法
- 可以使用lineTo不停的改变很小的间距来画 但是十分耗费性能
- 使用arc画圆,使用scale进行变形
- 可以使用arcTo 贝塞尔曲线等进行椭圆的绘制,主要是要找到控制点,相对麻烦一些
那么我使用的就是第二种方法,主要是因为比较简单,虽然也有一定的弊端 比如进行缩放的时候他的位置会移动 ,再比如画出的曲线线条宽度不一致,但是无伤大雅
下面就是这篇文章的主要内容 椭圆是画出来了,但是我们有倾斜的需求该怎么办呢?就要使用到translate和rotate,具体的都在代码里写了
// 可以参考下思路 主要还是跟据场景来定drawSkimLine(ctx, x,y,radius) {ctx.lineWidth = 2;ctx.strokeStyle = "red";ctx.beginPath();ctx.translate(x,y) //将画布的原点定位到 椭圆的圆心ctx.rotate(30 * Math.PI / 180); //椭圆倾斜的角度ctx.scale(0.3, 1);//因为arc画的是圆 是通过scale变形变成的椭圆ctx.arc(0, 0, radius, 0, Math.PI * 2);//画圆 注意这里前两个参数是0,0ctx.stroke();ctx.draw();}
那么这个的重点就是顺序一定一定要按照上面的顺序来,如果先scale 你会发现不管你怎么旋转都是没有用的,如果不先translate去定位原点,旋转和缩放就会脱离轨迹
如果有其他更好的方法欢迎指教,刚开始摸索canvas,嘻嘻,主要是为了记录自己的坑
uniapp实现canvas画倾斜的圆相关推荐
- uni-app 利用canvas画简单海报并保存图片
一.效果图 二.代码 <template><view class="canvas-box"><canvas class="canvas&q ...
- 【uniapp】canvas画海报保存图片兼容H5和APP
APP.H5长按保存海报 海波实现如下: html <!-- #ifdef H5 --> <div class="app-h5-save-poster">& ...
- uniapp使用canvas画海报二维码
目录 给定画布大小<在template内> 先引入js:js复制最下面的代码即可,用你的方法引入即可! 绘图:</
- android canvas空心圆,用canvas画实心圆和空心圆的方法
用canvas画实心圆和空心圆的方法 发布时间:2020-09-14 10:19:25 来源:亿速云 阅读:260 作者:小新 这篇文章给大家分享的是有关用canvas画实心圆和空心圆的方法的内容.小 ...
- 使用canvas画同心圆,并且设置颜色渐变
使用canvas进行画圆,并且设置圆环颜色渐变:中间的实心圆渐变.在使用的过程中,其实是发现createLinearGradient(x0,y0,x1,y1)方法时,根据改变x0,y0,x1,y1可以 ...
- 用php绘制空心圆,html5使用canvas画空心圆与实心圆_html5教程技巧
这里给大家分享的是一个学习canvas的时候做的画空心圆与实心圆的练习题,非常简单. 代码如下: var canvas=document.getElementById("canvas&quo ...
- canvas画圆又毛边
canvas画圆又毛边 canvas使用arc()画园有毛边,如图:,只需给其添加width,height即可,直接上代码 <!DOCTYPE html> <html lang=&q ...
- Canvas画环形圆
效果图1: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
- php画圆 锯齿,优雅的解决canvas画圆锯齿问题
canvas 解决canvas画圆锯齿问题 之前做一各项目需要画一个饼图,于是使用HTML5的canvas元素画出来的.一看在移动端手机上测试都发现画图有一点锯齿明显问题, 1 效果如下 代码如下 v ...
最新文章
- 重温目标检测--YOLO v1
- ARP侦查工具Netdiscover
- 被吹的神乎其神的Python到底都能干什么
- 信息学奥赛C++语言:小青蛙回来了
- JQuery学习笔记(1)
- jQuery:节点操作、事件操作
- QT第三方串口类Win_QextSerialPort,串口工具插拔后无法继续使用问题
- adb java_ADB - javalzy - 博客园
- wordpress如何整合html语言,怎么用wordpress建中英文双语及多语言切换的网站
- IDEA主题设置,自定义主题
- 读书笔记:程序员的工具箱之“代码片段”
- 使用OpenResty控制CDN回源主机
- Prometheus最佳实践 Summary和Histogram
- Electron 远程控制
- 程序员最喜欢的4个编辑器!码农出品,必属精品!
- Ubuntu和windows双系统并存条件下,在Windows系统内插耳机没有声音的问题
- Excel提取插入的PPT对象
- 工程结算款支付比例_工程进度款的支付比例及付款实例分析
- eclipse的光标变粗,及其解决办法
- python代替易语言_基于hook的python机器人,彻底取代itchat