canvas仿写贝塞尔曲线的示例代码


Posted in HTML / CSS onDecember 29, 2017

天正在等烟雨,而我在等你,啦啦啦,欢迎关注我的简书,今天分享的是原创的canvas仿写贝塞尔曲线方法。具体如下:

效果图:

canvas仿写贝塞尔曲线的示例代码

html

<canvas id="mycanvas" width="500" height="500">您的浏览器不支持canvas</canvas>

css

canvas{ border: 1px solid black;}

js

var canvas = document.getElementById("mycanvas");
        var context = canvas.getContext("2d");
        var x1 = 100;
        var y1 = 100;
        var x2 = 400;
        var y2 = 400;
        draw();
        function draw(){
            //画半透明的线
            context.beginPath();
            context.moveTo(500,0);
            context.lineTo(0,500);
            context.strokeStyle = "rgba(0,0,0,0.3)";
            context.lineWidth = 10;
            context.stroke();
            //画连接线
            context.beginPath();
            context.moveTo(0,500);
            context.lineTo(x1,y1);
            context.lineWidth = 2;
            context.strokeStyle = "black";
            context.stroke();
            context.beginPath();
            context.moveTo(500,0);
            context.lineTo(x2,y2);
            context.lineWidth = 2;
            context.strokeStyle = "black";
            context.stroke();
            //画红球
            context.beginPath();
            context.arc(x1,y1,10,0,Math.PI*2);
            context.fillStyle = "orange";
            context.fill();
            //画蓝球
            context.beginPath();
            context.arc(x2,y2,10,0,Math.PI*2);
            context.fillStyle = "blue";
            context.fill();
            //画贝塞尔曲线
            context.beginPath();
            context.moveTo(0,500);
            context.bezierCurveTo(x1,y1,x2,y2,500,0);
            context.lineWidth = 5;
            context.stroke();
        }
        //拖动小球做动画
        //判断是否拖动小球
        //如果在小球上就做动画
        canvas.onmousedown = function(e){
            var ev = e || window.event;
            var x = ev.offsetX;
            var y = ev.offsetY;
            //判断是否在红球上
            var dis = Math.pow((x-x1),2) + Math.pow((y-y1),2);
            if(dis<100){
                console.log("鼠标在红球上");
                canvas.onmousemove = function(e){
                    var ev = e || window.event;
                    var xx = ev.offsetX;
                    var yy = ev.offsetY;
                    //清除画布
                    context.clearRect(0,0,canvas.width,canvas.height);
                    x1 = xx;
                    y1 = yy;
                    //重绘制
                    draw();
                }
            }
            //判断鼠标是否在蓝球上
            var dis = Math.pow((x-x2),2) + Math.pow((y-y2),2);
            if(dis<100){
                canvas.onmousemove = function(e){
                    var ev = e || window.event;
                    var xx1 = ev.offsetX;
                    var yy1 = ev.offsetY;
                    //清除画布
                    context.clearRect(0,0,canvas.width,canvas.height);
                    x2 = xx1;
                    y2 = yy1;
                    //重绘制
                    draw();
                }
            }
        }
        document.onmouseup =function(){
            canvas.onmousemove = " ";
        }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
纯css3实现照片墙效果
Dec 26 HTML / CSS
CSS3实现闪烁动画效果的方法
Feb 09 HTML / CSS
轻松掌握CSS3中的字体大小单位rem的使用方法
May 24 HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
Sep 10 HTML / CSS
浅谈pc和移动端的响应式的使用
Jan 03 HTML / CSS
HTML5 canvas基本绘图之填充样式实现
Jun 27 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
Feb 14 HTML / CSS
详解android与HTML混合开发总结
Jun 06 HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
Aug 20 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
Mar 09 HTML / CSS
CSS实现背景图片全屏铺满自适应的3种方式
Jul 07 HTML / CSS
Canvas绘制浮动球效果的示例
Dec 29 #HTML / CSS
微信小程序“圣诞帽”的实现思路详解
Dec 28 #HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
Dec 28 #HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
Dec 27 #HTML / CSS
canvas实现圆形进度条动画的示例代码
Dec 26 #HTML / CSS
详解HTML5 录音的踩坑之旅
Dec 26 #HTML / CSS
移动HTML5前端框架—MUI的使用
Dec 18 #HTML / CSS
You might like
一个取得文件扩展名的函数
2006/10/09 PHP
一个基于PDO的数据库操作类
2011/03/24 PHP
php获取当月最后一天函数分享
2015/02/02 PHP
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
PHP中实现Bloom Filter算法
2015/03/30 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
php+lottery.js实现九宫格抽奖功能
2019/07/21 PHP
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
javascript实现表格排序 编辑 拖拽 缩放
2015/01/02 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
解决iView中时间控件选择的时间总是少一天的问题
2018/03/15 Javascript
Vue.js中的computed工作原理
2018/03/22 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
2018/08/20 Javascript
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
跟老齐学Python之Python文档
2014/10/10 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
Python使用三种方法实现PCA算法
2017/12/12 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
python入门前的第一课 python怎样入门
2018/03/06 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
python爬虫selenium和phantomJs使用方法解析
2019/08/08 Python
python画微信表情符的实例代码
2019/10/09 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
Yahoo-PHP面试题3
2012/01/14 面试题
机械专业毕业生自荐信
2013/11/02 职场文书
粗加工管理制度
2014/02/04 职场文书
新闻编辑求职信
2014/07/13 职场文书
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
2015新学期开学寄语
2015/02/26 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
MySQL 1130异常,无法远程登录解决方案详解
2021/08/23 MySQL
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android