html5＜canvas路径和三角函数的故事＞

最新推荐文章于 2021-06-27 07:12:14 发布
最新推荐文章于 2021-06-27 07:12:14 发布
阅读量397 收藏
点赞数
分类专栏： HTML4/HTML5 文章标签： 路径 三角函数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27682041/article/details/72779431
版权
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            canvas{
                background: red;
            }
        </style>
        <script>
        window.onload = function(){
            var canvas = document.getElementById('canvas');
            var cobj = canvas.getContext('2d');//获取绘图环境
            cobj.strokeStyle = "#aa1";
            cobj.rect(0,0,100,100);//该步只是把信息放入内存当中
            cobj.stroke();//通知浏览器绘制出图形    
        }
        </script>
    </head>
    <body>
        <canvas id="canvas" width=500 height=500>
            请你升级你的浏览器!
        </canvas>
    </body>

</html>


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            canvas{
                background: red;
            }
        </style>
    </head>
    <script>
        window.onload = function(){
            var canvas = document.getElementById('canvas');
            var cobj = canvas.getContext('2d');//获取绘图环境
            // cobj.moveTo(0,0);
            // cobj.lineTo(100,100);//该步只是把信息放入内存当中
            // cobj.stroke();//通知浏览器绘制出图形
            // cobj.beginPath();//新开一块内存来存放第二段直线，使新的直线不会与原来的直线相连
            // cobj.lineTo(0,200);//该步只是把信息放入内存当中
            // cobj.lineTo(100,150);//该步只是把信息放入内存当中
            // cobj.lineTo(150,270);//该步只是把信息放入内存当中
            // cobj.closePath();//与beginPath是成对出现的，具有头尾相连的功能，使这里的两条线成三角形
            // cobj.stroke();//通知浏览器绘制出图形    

            //鼠标按下拖动画出图线
            canvas.onmousedown = function(e){
                var startX = e.layerX;
                var startY = e.layerY;
                cobj.moveTo(startX, startY);
                canvas.onmousemove = function(e){
                    var endX = e.layerX;
                    var endY = e.layerY;
                    cobj.lineTo(endX,endY);
                    cobj.stroke();
                }
                canvas.onmouseup = function(){
                    canvas.onmousemove = null;
                    canvas.onkeyup = null;
                }

            }
        }
        </script>
    <body>
    <canvas id="canvas" width=300 height=300>
       
    </canvas>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            canvas{
                background: red;
            }
        </style>
        <script>
        window.onload = function(){
            var canvas = document.getElementById('canvas');
            var cobj = canvas.getContext('2d');//获取绘图环境 width
            drawRect(2,3,44,55);
            drawCircle(120,250,50);
            //画矩形
            function drawRect(x,y,w,h){
                cobj.beginPath();
                cobj.moveTo(x, y);
                cobj.lineTo(x+w,y);
                cobj.lineTo(x+w,y+h);
                cobj.lineTo(x,y+h);
                cobj.closePath();
                cobj.stroke();
            }
            //画圆形
            function drawCircle(x,y,r){
                cobj.beginPath();
                for(var i=1;i<=360;i++){
                    cobj.lineTo(x+r*Math.cos(i*Math.PI/180),y+r*Math.sin(i*Math.PI/180));
                    cobj.stroke();
                }
            }

           
          
        }
        </script>
    </head>
    <body>
        <canvas id="canvas" width=300 height=300>
           
        </canvas>
    </body>
</html>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            canvas{
                background: red;
            }
        </style>
        <script>
        window.onload = function(){
            var canvas = document.getElementById('canvas');
            var cobj = canvas.getContext('2d');//获取绘图环境 width
            drawRect(2,3,44,55);
            drawCircle(120,250,50);
            //画矩形
            function drawRect(x,y,w,h){
                cobj.beginPath();
                cobj.moveTo(x, y);
                cobj.lineTo(x+w,y);
                cobj.lineTo(x+w,y+h);
                cobj.lineTo(x,y+h);
                cobj.closePath();
                cobj.stroke();
            }
            //话圆形
            function drawCircle(x,y,r){
                cobj.beginPath();
                for(var i=1;i<=360;i++){
                    cobj.lineTo(x+r*Math.cos(i*Math.PI/180),y+r*Math.sin(i*Math.PI/180));
                    cobj.stroke();
                }
            }

           
          
        }
        </script>
    </head>
    <body>
        <canvas id="canvas" width=300 height=300>
           
        </canvas>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            canvas{
                background: red;
            }
        </style>
        <script>
        window.onload = function(){
            var canvas = document.getElementById('canvas');
            var cobj = canvas.getContext('2d');//获取绘图环境
            cobj.lineWidth = '10';
            cobj.lineCap = 'round';
            cobj.moveTo(10,10);
            cobj.lineTo(100,100);//该步只是把信息放入内存当中
            cobj.stroke();//通知浏览器绘制出图形
        }
        </script>
    </head>
    <body>
    <canvas id="canvas" width=300 height=300>
       
    </canvas>
    </body>
</html>

二次贝塞尔曲线
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            canvas{
                background: red;
            }
        </style>
        <script>
        window.onload = function(){
            var canvas = document.getElementById('canvas');
            var cobj = canvas.getContext('2d');//获取绘图环境
            // cobj.moveTo(100,100);
            // // cobj.quadraticCurveTo(130,200,350,350);//二次贝塞尔曲线
            // cobj.bezierCurveTo(130,200,230,150,350,350);//三次贝塞尔曲线
            // cobj.stroke();//通知浏览器绘制出图形
           
            //鼠标点击，然后再其他地方放开，就会绘制一条直线，然后移动鼠标，就可以绘制贝塞尔曲线
            canvas.onmousedown = function(e){
                var startX = e.layerX;
                var startY = e.layerY;               
                canvas.onmouseup = function(e){
                    var endX = e.layerX;
                    var endY = e.layerY;
                    canvas.onmousemove = function(e){
                        cobj.clearRect(0,0,400,400);
                        var conX = e.layerX;
                        var conY = e.layerY;
                        cobj.beginPath();
                        cobj.moveTo(startX, startY);
                        cobj.quadraticCurveTo(conX,conY,endX,endY);
                        // cobj.closePath();
                        cobj.stroke();
                    }
                }
            }
        }
        </script>
    </head>
    <body>
    <canvas id="canvas" width=400 height=400>
       
    </canvas>
    </body>
</html>


鼠标点击下，圆会伸缩变化


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            canvas{
                background: red;
            }
        </style>
        <script>
            window.onload = function(){
                var canvas = document.getElementById('canvas');
                var cobj = canvas.getContext('2d');//获取绘图环境
                var angle = 0;
                cobj.beginPath();
                cobj.arc(200,200,50,0,2*Math.PI);//画圆
                cobj.stroke();
                cobj.beginPath();
                cobj.arc(180,180,10,0,2*Math.PI);
                cobj.stroke();
                cobj.beginPath();
                cobj.arc(180,180,1,0,2*Math.PI);
                cobj.stroke();
                cobj.beginPath();
                cobj.arc(220,180,10,0,2*Math.PI);
                cobj.stroke();
                cobj.beginPath();
                cobj.arc(220,180,1,0,2*Math.PI);
                cobj.stroke();
                cobj.beginPath();
                cobj.arc(200,200,30,0,Math.PI);
                cobj.stroke();
                cobj.beginPath();
                cobj.arc(195,200,3,0,2*Math.PI);
                cobj.stroke();
                cobj.beginPath();
                cobj.arc(205,200,3,0,2*Math.PI);
                cobj.stroke();
               
                canvas.onclick = function(){
                    setInterval(function(){
                        cobj.clearRect(0, 0, 400, 400);
                        cobj.beginPath();
                        angle += 0.2;
                        cobj.arc(200,200,50+30*Math.sin(angle),0,2*Math.PI);
                        cobj.stroke();
                        cobj.beginPath();
                        cobj.arc(180,180,10+30*Math.sin(angle),0,2*Math.PI);
                        cobj.stroke();
                        cobj.beginPath();
                        cobj.arc(180,180,1,0,2*Math.PI);
                        cobj.stroke();
                        cobj.beginPath();
                        cobj.arc(220,180,10+30*Math.sin(angle),0,2*Math.PI);
                        cobj.stroke();
                        cobj.beginPath();
                        cobj.arc(220,180,1,0,2*Math.PI);
                        cobj.stroke();
                        cobj.beginPath();
                        cobj.arc(200,200,30+30*Math.sin(angle),0,Math.PI);
                        cobj.stroke();
                        cobj.beginPath();
                        cobj.arc(195,200,3+30*Math.sin(angle),0,2*Math.PI);
                        cobj.stroke();
                        cobj.beginPath();
                        cobj.arc(205,200,3+30*Math.sin(angle),0,2*Math.PI);
                        cobj.stroke();
                    },100);
                }
            }
        </script>
    </head>
    <body>
    <canvas id="canvas" width=400 height=400>       
    </canvas>
    </body>
</html>
指哪打哪


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            canvas{
                background: red;
            }
        </style>
        <script>
        window.onload = function(){
            var canvas = document.getElementById('canvas');
            var cobj = canvas.getContext('2d');//获取绘图环境
            cobj.moveTo(250,400);
            cobj.strokeStyle = 'teal';
            cobj.lineWidth = '5';
            cobj.lineTo(250,360);
            cobj.stroke();//通知浏览器绘制出图形
            canvas.onmousemove = function(e){
                var mouseX = e.layerX;
                var mouseY = e.layerY;
                var startX = 250;
                var startY = 400;
                var angle = Math.atan2((mouseY-startY),(mouseX-startX));
                cobj.clearRect(0, 0, 500, 500);
                cobj.beginPath();
                cobj.moveTo(startX, startY);
                cobj.lineTo(startX+40*Math.cos(angle),startY+40*Math.sin(angle));
                cobj.stroke();
            }
        }
        </script>
    </head>
    <body>
    <canvas id="canvas" width=500 height=500>
       
    </canvas>
    </body>
</html>

sensus森森
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
第四章 函数的故事（1）超详！！！
weixin_45450950的博客
12-08 200
函数是什么？ 函数的分类 库函数 库函数大致分类（举了下列函数类别含有的一些常见函数） 我们该怎样学习库函数呢？ 自定义函数 例子1：（写一个函数，求两个数较大值） 例子2：（写一个函数，打印一个直角边长为n的等腰直角三角形） 函数的参数 实际参数（实参） 形式参数（形参） 例子3：思考下面函数是否可行（交换两个整形变量a，b的值）
html5使用canvas实现跟随光标跳动的火焰效果
01-21
本效果的完整代码如下,把代码保存到HTML文件中打开也能查看效果,火焰会跟随光标: 复制代码代码如下:<!DOCTYPE HTML><...<canvas id=”canvas-keleyi-com”></canvas><script type=”text/javascr
html5内联SVG——<path>标签
Syes_lei的博客
08-24 1万+
html5内联SVG——<path>标签
html5中三角函数,三角函数（一）
weixin_35742845的博客
06-08 566
三角函数三角函数、勾股定理、两点间的距离，还有sin、cos、tan，是不是感觉这些很是熟悉，恍惚间回到了初中时代，想起了数学课本上那一道道让人头疼的三角函数。今天就让我们来回顾一下！对于三角函数，我会分为两章来讲，这一章主要讲三角函数和反三角函数的基本公式：角度与弧度的转换Math对象中的三角函数实例：指红针在下一章主要讲我们能利用三角函数做些什么：波形(平滑的上下运动、线性运动、脉冲运动)圆周...
html5 绘制,Html5 绘制N角形
weixin_29441555的博客
06-27 131
转载自：http://www.zybang.com/question/0bb53a7133bd38703648c478d598209e.html代码如下：function createStar(context,n,dx,dy,size){context.beginPath();var dig = Math.PI / n * 4;for(var i=0;i{var x = Math.sin(i*di...
html5三角函数怎么用,HTML5（五）html5＜canvas路径和三角函数的故事＞(下)
weixin_42500380的博客
06-18 89
利用canvas的路径实现直线跟着鼠标的方向转动和点击圆，圆变大变小的功能。canvascanvas{background:#ccc;}window.onload=function(){var canvas = document.getElementById("canvas");var cobj = canvas.getContext("2d");/*功能：直线跟着鼠标的方向转动*/cobj.li...
html5使用canvas画三角形
09-28
主要介绍了html5使用canvas画三角形,需要的朋友可以参考下
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
09-28
主要介绍了借助HTML5 Canvas来绘制三角形和矩形等多边形的方法,通过文章开头给的一些属性及下面三角形和矩形的例子,同理便可得出其他多边形的画法,需要的朋友可以参考下
html5＜canvas游戏连连看＞
04-03
很有趣的h5 canvas 实现的小游戏连连看，简单易懂，有利于大家加深对canvas的理解和认识。
html5 canvas 实现光线沿不规则路径运动
11-21
使用offset-path偏移路径和offset-roate偏移角度让元素沿着不规则路径走 <!DOCTYPE html> <html> <head> <title>offset-path/offset-roate</title> </head> <style type...
HTML5基于Canvas模拟三角函数sin图像生成特效源码
09-02
这是一款利用HTML5 Canvas来模拟三角函数sin图像生成原理，非常直观。随着左侧圆形转动对应的绘制出三角函数sina的正玄函数曲线图像。
html5中三角函数,HTML5（三）html5＜canvas路径和三角函数的故事＞(上)
weixin_33430573的博客
06-08 114
canvascanvas{background:#ccc;}window.onload=function(){var canvas = document.getElementById("canvas");var cobj = canvas.getContext("2d");/*属性*/cobj.lineWidth=10;//cobj.lineCap='round';//设置或返回线条的结束端点的样...
HTML5+JavaScript动画基础 第一部分 动画中的三角学
wuqi5328的博客
09-09 386
一、三角函数 正弦函数，余弦函数，反正切函数（Math.atan2(y,x)）用的较为频繁; 反正弦函数，反余弦函数，用的较少，但是肯定有存在的意义 Math.atan2(y,x)一般用来计算角度的大小；如果用 Math.atan(y,x)进行计算的时候不能够准确的进行区分，会返回很多相同的角 //避免在动画代码中出现具体数字，以免不容易进行修改：将数字从代码中剥离出来，首选放在文件的开...
HTML5（四）html5＜canvas路径和三角函数的故事＞(中)
北风
01-18 692
canvas canvas{ background:#ccc; } window.onload=function(){ var canvas = document.getElementById("canvas"); var cobj = canvas.getContext("2d"); cobj.rect(100,100,100,
canvas分享之三角函数（1）
Jour的博客
08-25 2008
这一节会分为两部分来讲，在第一部分主要讲下面这三个部分： 三角函数! 常用三角函数 角度旋转（运用实例） 在下一节主要讲解： 波形运动 圆周运动 两点间的距离 ok!现在开始我们的上部分，看到三角函数，勾股定理这样的数学名词是不是感到双腿打颤啊。好吧！就算你已经吓尿了，也不能否认我们初中学习的知识终于有了用武之地，挽起袖子，开整！！！
HTML5 中SVG属性path实现动态绘制圆形进度条效果
weixin_42794365的博客
01-18 2156
使用svg 绘制动态进度环，这里使用svg 中的path实现效果，和定时器制作动态环加载 效果如下： 代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;HTML5 中SVG属性path实现动态绘制圆形进度
html path标签的作用
热门推荐
不甘于平凡的溃败的博客
04-03 1万+
&lt;path&gt; 标签用来定义路径。&lt;path&gt; 标签&lt;path&gt; 标签用来定义路径。下面的命令可用于路径数据：M = movetoL = linetoH = horizontal linetoV = vertical linetoC = curvetoS = smooth curvetoQ = quadratic Belzier curveT = smooth q...
Html5
2197
07-18 660
1&gt;语义化标签 1)兼容问题 IE8以上兼容 解决方案： 1&gt;document.createElement("标签名"),然后再给它样式，但是创建的标签并不是一个块标签，所有可以利用display:block;使标签成为块标签. 2&gt;利用插件 html5shiv.js 2）具体内容 header footer nav导航 aside一般用于侧边栏 arti...
canvas学习笔记01：Math.sin & Math.cos
weixin_30284355的博客
03-04 173
<!DOCTYPE html> <html> <head> <meta charset="gbk"> </head> <body> <canvas width="1000" height="600" id="c"></canvas> <script> (fu...
HTML5 <canvas> 标签播放的 Canvas 视频怎么倍速播放
最新发布
06-06
要在 HTML5 `<canvas>` 标签播放的 Canvas 视频中倍速播放，可以使用 JavaScript 和 HTML5 Video API 来实现。 以下是一个示例代码，演示如何使用 Video API 和 JavaScript 将 Canvas 视频的播放速度提高到 2 倍： ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值