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动画效果抖动解决方法
Sep 03 HTML / CSS
CSS3教程(8):CSS3透明度指南
Apr 02 HTML / CSS
HTML5和CSS3让网页设计提升到下一个高度
Aug 14 HTML / CSS
css3使网页、图片变成灰色兼容大多数浏览器
Jul 02 HTML / CSS
css3实现超炫风车特效
Nov 12 HTML / CSS
html5本地存储_动力节点Java学院整理
Jul 12 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
Jan 30 HTML / CSS
h5调用摄像头的实现方法
Jun 01 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
Mar 04 HTML / CSS
H5最强接口之canvas实现动态图形功能
May 31 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 HTML / CSS
带你了解CSS基础知识,样式
Jul 21 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
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
php获取网页请求状态程序示例
2014/06/17 PHP
Laravel如何实现适合Api的异常处理响应格式
2020/06/14 PHP
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
基于JQuery 滑动与动画的说明介绍
2013/04/18 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
2014/08/18 Javascript
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
利用n工具轻松管理Node.js的版本
2017/04/21 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
深入浅析vue中cross-env的使用
2019/09/12 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
Python读写Redis数据库操作示例
2014/03/18 Python
python 实现对文件夹内的文件排序编号
2018/04/12 Python
python logging日志模块以及多进程日志详解
2018/04/18 Python
python 巧用正则寻找字符串中的特定字符的位置方法
2018/05/02 Python
Python基于Floyd算法求解最短路径距离问题实例详解
2018/05/16 Python
使用python画个小猪佩奇的示例代码
2018/06/06 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
解决Python中pandas读取*.csv文件出现编码问题
2019/07/12 Python
Python猴子补丁Monkey Patch用法实例解析
2020/03/23 Python
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
美国最大的香水出口:FragranceX.com
2017/11/04 全球购物
机电专业毕业生推荐信
2013/11/10 职场文书
入学生会自荐书范文
2014/02/05 职场文书
公司晚会主持词
2014/03/22 职场文书
新年主持词
2014/03/27 职场文书
村干部群众路线整改措施思想汇报
2014/10/12 职场文书
饭店服务员岗位职责
2015/02/09 职场文书