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垂直手风琴菜单
Jun 28 HTML / CSS
css3实现针线缝合效果(图解步骤)
Feb 04 HTML / CSS
css3 伪元素和伪类选择器详解
Sep 04 HTML / CSS
css实例教程 一款纯css3实现的超炫动画背画特效
Nov 05 HTML / CSS
浅谈css3中的渐进增强和优雅降级
Dec 01 HTML / CSS
W3C公布最新的HTML5标准草案
Oct 17 HTML / CSS
检测浏览器是否支持html5视频的代码
Mar 28 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
Jan 01 HTML / CSS
HTML5 Canvas的事件处理介绍
Apr 24 HTML / CSS
详解HTML5中rel属性的prefetch预加载功能使用
May 06 HTML / CSS
HTML5中indexedDB 数据库的使用实例
May 11 HTML / CSS
不要在HTML中滥用div
May 08 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注入实例
2006/10/09 PHP
PHP 程序员的调试技术小结
2009/11/15 PHP
php数字转汉字代码(算法)
2011/10/08 PHP
PHP的变量类型和作用域详解
2014/03/12 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
WordPress网站性能优化指南
2015/11/18 PHP
win平台安装配置Nginx+php+mysql 环境
2016/01/12 PHP
YII动态模型(动态表名)支持分析
2016/03/29 PHP
浅谈php中curl、fsockopen的应用
2016/12/10 PHP
php+websocket 实现的聊天室功能详解
2020/05/27 PHP
js传值 判断
2006/10/26 Javascript
js下利用控制器载入对应脚本
2010/07/17 Javascript
AlertBox 弹出层信息提示框效果实现步骤
2010/10/11 Javascript
js判断变量是否未定义的代码
2020/03/28 Javascript
Javascript中的五种数据类型详解
2014/12/26 Javascript
JQuery球队选择实例
2015/05/18 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
SVG描边动画
2017/02/23 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
JS实现HTML页面中动态显示当前时间完整示例
2018/07/30 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
2019/05/10 Javascript
js+canvas实现纸牌游戏
2020/03/16 Javascript
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
2020/12/23 Javascript
Python语言描述随机梯度下降法
2018/01/04 Python
Pandas 数据处理,数据清洗详解
2018/07/10 Python
Python对象转换为json的方法步骤
2019/04/25 Python
django 信号调度机制详解
2019/07/19 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
PyTorch笔记之scatter()函数的使用
2020/02/12 Python
理解Django 中Call Stack机制的小Demo
2020/09/01 Python
汽车队司机先进事迹材料
2014/02/01 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python