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背景_动力节点Java学院整理
Jul 11 HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
Sep 25 HTML / CSS
css3 矩阵的使用详解
Mar 20 HTML / CSS
H5仿微信界面教程(一)
Jul 05 HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
Dec 07 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
Oct 14 HTML / CSS
html5开发之viewport使用
Oct 17 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
Mar 27 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
Feb 19 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
Sep 14 HTML / CSS
HTML5在手机端实现视频全屏展示方法
Nov 23 HTML / CSS
css filter和getUserMedia的联合使用
Feb 24 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
关于更改Zend Studio/Eclipse代码风格主题的介绍
2013/06/23 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
Laravel框架FormRequest中重写错误处理的方法
2019/02/18 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
HTML node相关的一些资料整理
2010/01/01 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
AngularJS入门教程之表格实例详解
2016/07/27 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
Bootstrap实现的表格合并单元格示例
2018/02/06 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
JavaScript实现更换背景图片
2019/10/18 Javascript
JavaScript 替换所有匹配内容及正则替换方法
2020/02/12 Javascript
Map与WeakMap类型在JavaScript中的使用详解
2020/11/18 Javascript
python实现文件快照加密保护的方法
2015/06/30 Python
用Python实现随机森林算法的示例
2017/08/24 Python
Python中import机制详解
2017/11/14 Python
python如何查看微信消息撤回
2018/11/27 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
python 用struct模块解决黏包问题
2020/11/07 Python
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
shell的种类有哪些
2015/04/15 面试题
会计师事务所审计实习自我鉴定
2013/09/20 职场文书
装修设计师求职信
2014/02/26 职场文书
项目建议书范文
2014/05/12 职场文书
银行进社区活动总结
2014/07/07 职场文书
学习普通话的体会
2014/11/07 职场文书
神龙架导游词
2015/02/11 职场文书
三行辞职书范文
2015/02/26 职场文书
2015年财务工作总结范文
2015/03/31 职场文书