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 相关文章推荐
CSS Grid布局教程之网格单元格布局
Dec 30 HTML / CSS
CSS3实现千变万化的文字阴影text-shadow效果设计
Apr 26 HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 HTML / CSS
css3实现元素环绕中心点布局的方法示例
Jan 15 HTML / CSS
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
Mar 07 HTML / CSS
html5 postMessage解决跨域、跨窗口消息传递方案
Dec 20 HTML / CSS
HTML5实现移动端复制功能
Apr 19 HTML / CSS
HTML5实现签到 功能
Oct 09 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
Jan 03 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
Mar 19 HTML / CSS
css3应用示例:新增的选择器
Mar 16 HTML / CSS
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
Apr 19 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
php中获得视频时间总长度的另一种方法
2011/09/15 PHP
PHP动态生成javascript文件的2个例子
2014/04/11 PHP
php中关于socket的系列函数总结
2015/05/18 PHP
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
Joomla开启SEF的方法
2016/05/04 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
php 读取输出其他文件的实现方法
2016/07/26 PHP
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
2010/08/13 Javascript
javascript 数组排序函数sort和reverse使用介绍
2013/11/21 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
2014/03/13 Javascript
JavaScript使用RegExp进行正则匹配的方法
2015/07/11 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
javascript 封装Date日期类实例详解
2017/05/28 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
浅谈react性能优化的方法
2018/09/05 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
JS实现简易贪吃蛇游戏
2020/08/24 Javascript
python re模块findall()函数实例解析
2018/01/19 Python
浅谈Python在pycharm中的调试(debug)
2018/11/29 Python
PyTorch基本数据类型(一)
2019/05/22 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
求最大连续递增数字串(如"ads3sl456789DF3456ld345AA"中的"456789")
2015/09/11 面试题
技术总监的工作职责
2013/11/13 职场文书
市政管理求职信范文
2014/05/07 职场文书
留守儿童工作方案
2014/06/02 职场文书
2015驻村干部工作总结
2015/04/07 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
师德师风心得体会(2016精选篇)
2016/01/12 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android