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中动画属性transform、transition和animation属性的区别
Sep 25 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 HTML / CSS
CSS3 实现的火焰动画
Dec 07 HTML / CSS
js实现移动端H5页面手指滑动刻度尺功能
Nov 16 HTML / CSS
HTML5 Canvas渐进填充与透明实现图像的Mask效果
Jul 11 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
Jun 03 HTML / CSS
phonegap常用事件总结(必看篇)
Mar 31 HTML / CSS
详解HTML5 data-* 自定义属性
Jan 24 HTML / CSS
五分钟学会HTML5的WebSocket协议
Nov 22 HTML / CSS
AmazeUI 等分网格的实现示例
Aug 25 HTML / CSS
六种css3实现的边框过渡效果
Apr 22 HTML / CSS
HTML+CSS实现导航条下拉菜单的示例代码
Aug 02 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
Laravel 4 初级教程之Pages、表单验证
2014/10/30 PHP
php+mysqli实现批量执行插入、更新及删除数据的方法
2015/01/29 PHP
PHP中常见的缓存技术实例分析
2015/09/23 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
jquery tools系列 expose 学习
2009/09/06 Javascript
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
2010/05/17 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
video.js使用改变ui过程
2017/03/05 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
javascript 中null和undefined区分和比较
2017/04/19 Javascript
分析javascript中9 个常见错误阻碍你进步
2017/09/18 Javascript
ztree实现左边动态生成树右边为内容详情功能
2017/11/03 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
2019/12/27 Javascript
node 版本切换的实现
2020/02/02 Javascript
Python对象转JSON字符串的方法
2016/04/27 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
python处理两种分隔符的数据集方法
2018/12/12 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
简单了解为什么python函数后有多个括号
2019/12/19 Python
在keras中获取某一层上的feature map实例
2020/01/24 Python
pycharm 实现光标快速移动到括号外或行尾的操作
2021/02/05 Python
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
HTML5上传文件显示进度的实现代码
2012/08/30 HTML / CSS
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
颁奖典礼主持词
2014/03/25 职场文书
设计顾问服务计划书
2014/05/04 职场文书
医德医风学习心得体会
2016/01/25 职场文书
小学三年级语文教学反思
2016/03/03 职场文书
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python