您的位置:1010cc时时彩经典版 > 1010cc时时彩客户端 > 1010cc时时彩经典版位置不是第一次开始的位置,

1010cc时时彩经典版位置不是第一次开始的位置,

发布时间:2019-08-10 12:05编辑:1010cc时时彩客户端浏览(119)

    通过HTML5 Canvas API绘制弧线和圆形的教程,html5canvas

    在html5中,CanvasRenderingContext2D对象也提供了专门用于绘制圆形或弧线的方法,请参考以下属性和方法介绍:

    JavaScript Code复制内容到剪贴板

    1. arc(x, y, radius, startRad, endRad, anticlockwise)  

    在canvas画布上绘制以坐标点(x,y)为圆心、半径为radius的圆上的一段弧线。这段弧线的起始弧度是startRad,结束弧度是endRad。这里的弧度是以x轴正方向(时钟三点钟)为基准、进行顺时针旋转的角度来计算的。anticlockwise表示是以逆时针方向还是顺时针方向开始绘制,如果为true则表示逆时针,如果为false则表示顺时针。anticlockwise参数是可选的,默认为false,即顺时针。
    1010cc时时彩经典版 1

    arc()方法中的弧度计算方式

    JavaScript Code复制内容到剪贴板

    1. arcTo(x1, y1, x2, y2, radius)  

    这个方法将利用当前端点、端点1(x1,y1)和端点2(x2,y2)这三个点所形成的夹角,然后绘制一段与夹角的两边相切并且半径为radius的圆上的弧线。一般情况下,绘制弧线的开始位置是当前端点,结束位置是端点2,并且弧线绘制的方向就是连接这两个端点的最短圆弧的方向。此外,如果当前端点不在所指定的圆上,本方法还将绘制一条从当前端点到弧线起点的直线。
    由于详细介绍arcTo()方法的篇幅较多,请移步至这里查看arcTo()的详细用法。

    在了解了canvas绘制弧线的上述API之后,我们就一起来看看如何使用arc()绘制弧线。我们已经知道,arc()接收的第4个和第5个参数表示绘制弧线的开始弧度和结束弧度。相信各位读者在学校的数学或几何课程上都学过弧度,弧度是一种角度单位。弧长等于半径的弧,其所对的圆心角就是1弧度。我们还知道,半径为r的圆,其周长为2πr。在具备这些几何知识的前提下,我们就可以使用arc()方法绘制弧线了。

    使用canvas绘制弧线

    现在,我们就来绘制一条半径为50px的圆的1/4弧线。

    JavaScript Code复制内容到剪贴板

    1. <!DOCTYPE html>   
    2. <html>   
    3. <head>   
    4. <meta charset="UTF-8">   
    5. <title>HTML5 Canvas绘制弧线入门示例</title>   
    6. </head>   
    7. <body>   
    8.   
    9. <!-- 添加canvas标签,并加上红色边框以便于在页面上查看 -->   
    10. <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">   
    11. 您的浏览器不支持canvas标签。   
    12. </canvas>   
    13.   
    14. <script type="text/javascript">   
    15. //获取Canvas对象(画布)   
    16. var canvas = document.getElementById("myCanvas");   
    17. //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误   
    18. if(canvas.getContext){     
    19.     //获取对应的CanvasRenderingContext2D对象(画笔)   
    20.     var ctx = canvas.getContext("2d");     
    21.        
    22.     //开始一个新的绘制路径   
    23.     ctx.beginPath();   
    24.     //设置弧线的颜色为蓝色   
    25.     ctx.strokeStyle = "blue";   
    26.     var circle = {   
    27.         x : 100,    //圆心的x轴坐标值   
    28.         y : 100,    //圆心的y轴坐标值   
    29.         r : 50      //圆的半径   
    30.     };   
    31.     //沿着坐标点(100,100)为圆心、半径为50px的圆的顺时针方向绘制弧线   
    32.     ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI / 2, false);       
    33.     //按照指定的路径绘制弧线   
    34.     ctx.stroke();   
    35. }   
    36. </script>   
    37. </body>   
    38. </html>  

    对应的显示效果如下图:
    1010cc时时彩经典版 2

    使用canvas沿着顺时针方向绘制弧线 如上所示,我们设置了绘制的弧线的所在圆的圆心坐标为(100,100),半径为50px。由于一个半径为r的圆的周长为2πr,也就是说,一个完整的圆,其所对应的弧度为2π(换算成常规角度就是360°),所以我们想要画一个圆的1/4弧线,只要弧度为π/2(即90°)就可以了。在上面的代码中,我们使用了JavaScript中表示π的常量Math.PI。

    此外,在上面的代码中,我们还设置了绘制弧线的方向为顺时针方向(false)。由于起始弧度为0,结束弧度为π/2,因此弧线将从x轴的正方向开始沿着顺时针方向绘制,从而得到上面的图形。如果我们将上述代码中的弧线绘制方向改为逆时针,会有什么样的效果呢?

    JavaScript Code复制内容到剪贴板

    1. <script type="text/javascript">   
    2. //获取Canvas对象(画布)   
    3. var canvas = document.getElementById("myCanvas");   
    4. //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误   
    5. if(canvas.getContext){     
    6.     //获取对应的CanvasRenderingContext2D对象(画笔)   
    7.     var ctx = canvas.getContext("2d");     
    8.        
    9.     //开始一个新的绘制路径   
    10.     ctx.beginPath();   
    11.     //设置弧线的颜色为蓝色   
    12.     ctx.strokeStyle = "blue";   
    13.     var circle = {   
    14.         x : 100,    //圆心的x轴坐标值   
    15.         y : 100,    //圆心的y轴坐标值   
    16.         r : 50      //圆的半径   
    17.     };   
    18.     //沿着坐标点(100,100)为圆心、半径为50px的圆的逆时针方向绘制弧线   
    19.     ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI / 2, true);       
    20.     //按照指定的路径绘制弧线   
    21.     ctx.stroke();   
    22. }   
    23. </script>  

    对应的显示效果如下:
    1010cc时时彩经典版 3

    使用canvas沿着逆时针方向绘制弧线

    使用canvas绘制圆形

    当我们学会了绘制弧线之后,举一反三,我们想要绘制圆形自然也不在话下,只需要将上述代码的结束弧度改为2π即可。

    JavaScript Code复制内容到剪贴板

    1. <script type="text/javascript">   
    2. //获取Canvas对象(画布)   
    3. var canvas = document.getElementById("myCanvas");   
    4. //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误   
    5. if(canvas.getContext){     
    6.     //获取对应的CanvasRenderingContext2D对象(画笔)   
    7.     var ctx = canvas.getContext("2d");     
    8.        
    9.     //开始一个新的绘制路径   
    10.     ctx.beginPath();   
    11.     //设置弧线的颜色为蓝色   
    12.     ctx.strokeStyle = "blue";   
    13.     var circle = {   
    14.         x : 100,    //圆心的x轴坐标值   
    15.         y : 100,    //圆心的y轴坐标值   
    16.         r : 50      //圆的半径   
    17.     };   
    18.     //以canvas中的坐标点(100,100)为圆心,绘制一个半径为50px的圆形   
    19.     ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, true);       
    20.     //按照指定的路径绘制弧线   
    21.     ctx.stroke();   
    22. }   
    23. </script>  

    对应的显示效果如下:
    1010cc时时彩经典版 4

    JavaScript Code复制内容到剪贴板

    1. <script type="text/javascript">   
    2. //获取Canvas对象(画布)   
    3. var canvas = document.getElementById("myCanvas");   
    4. //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误   
    5. if(canvas.getContext){     
    6.     //获取对应的CanvasRenderingContext2D对象(画笔)   
    7.     var ctx = canvas.getContext("2d");     
    8.        
    9.     //开始一个新的绘制路径   
    10.     ctx.beginPath();   
    11.     //设置弧线的颜色为蓝色   
    12.     ctx.strokeStyle = "blue";   
    13.     var circle = {   
    14.         x : 100,    //圆心的x轴坐标值   
    15.         y : 100,    //圆心的y轴坐标值   
    16.         r : 50      //圆的半径   
    17.     };   
    18.     //以canvas中的坐标点(100,100)为圆心,绘制一个半径为50px的圆形   
    19.     ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, true);       
    20.     //按照指定的路径绘制弧线   
    21.     ctx.stroke();   
    22. }   
    23. </script>  

    备注:arc()方法中的起始弧度参数startRad和结束弧度参数endRad都是以弧度为单位,即使你填入一个数字,例如360,仍然会被看作是360弧度。将上述代码的结束弧度设为360会产生什么用的后果呢?这就要看绘制的方向了(即anticlockwise参数的值),如果是顺时针绘制(false),则将绘制出一个完整的圆形;如果是逆时针绘制,大于2π的弧度将被转换为一个弧度相等、但不大于2π的弧度。例如,将上述代码中的结束弧度设为3π(Math.PI * 3),如果anticlockwise为false,将会显示为一个完整的圆形,如果为true,则其显示效果与设为π时的显示效果一致。
    1010cc时时彩经典版 5

    结束弧度设为3π时,顺时针(false)旋转的绘制效果
    1010cc时时彩经典版 6

    结束弧度设为3π时,逆时针(true)旋转的绘制效果

    Canvas API绘制弧线和圆形的教程,html5canvas 在html5中,CanvasRenderingContext2D对象也提供了专门用于绘制圆形或弧线的方法,请参考以下...

    H5 canvas多次重复画图后 ,位置不是第一次开始的位置
    timer = window.setInterval(function () { drawLine_V0101();}, 5000);
    function drawLine_V0101()
    {
    try
    {
    //获取Canvas对象
    var canvas = document.getElementById("myCanvas1");
    //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
    if (canvas.getContext) {
    //获取对应的CanvasRenderingContext2D对象
    var ctx = canvas.getContext;
    //圆弧的旋转角度,顺时针负增长,逆时针正增长
    1010cc时时彩经典版,ctx.rotate(-8 * Math.PI / 180);
    //设置弧线的颜色为蓝色
    ctx.strokeStyle = "#00FFD5";
    var circle = {
    x: 60, //圆心的x轴坐标值
    y: 60, //圆心的y轴坐标值
    r: 47, //圆的半径

    1、什么是canvas?

    用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能,html5clearrect

    在现实世界中,我们使用画笔在画板上进行绘画;在html5 canvas中,我们同样可以使用canvas的画笔——CanvasRenderingContext2D对象在canvas上进行绘画。众所周知,我们的画笔一般都会与橡皮擦配套使用,以便于纠正绘画过程中的错误并重新绘画。在html5 canvas中,CanvasRenderingContext2D对象也同样给我们提供了一个可以永远重复使用的橡皮擦——clearRect()方法。

    XML/HTML Code复制内容到剪贴板

    1. clearRect(x, y, width, height)  

    CanvasRenderingContext2D对象的clearRect()方法用于清除canvas内以指定坐标点(x,y)为左上角、宽度为width、高度为height的矩形区域中的所有图形像素。

    下面,我们来看一个实际的例子。我们先绘制一个半径为50px的实心圆,然后使用橡皮擦clearRect()对其中的局部区域进行擦除。绘制圆形的原始html5代码如下:

    JavaScript Code复制内容到剪贴板

    1. <!DOCTYPE html>   
    2. <html>   
    3. <head>   
    4. <meta charset="UTF-8">   
    5. <title>使用HTML5 clearRect()擦除指定的矩形区域的入门示例</title>   
    6. </head>   
    7. <body>   
    8.   
    9. <!-- 添加canvas标签,并加上红色边框以便于在页面上查看 -->   
    10. <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">   
    11. 您的浏览器不支持canvas标签。   
    12. </canvas>   
    13.   
    14. <script type="text/javascript">   
    15. //获取Canvas对象(画布)   
    16. var canvas = document.getElementById("myCanvas");   
    17. //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误   
    18. if(canvas.getContext){     
    19.     //获取对应的CanvasRenderingContext2D对象(画笔)   
    20.     var ctx = canvas.getContext("2d");   
    21.        
    22.     //绘制一个以坐标点(100,10)为圆心、半径为50px的圆形   
    23.     ctx.arc(100, 100, 50, 0, Math.PI * 2, false);   
    24.        
    25.     //绘制并填充圆形内部   
    26.     ctx.fill();      
    27. }   
    28. </script>   
    29. </body>   
    30. </html>  

    对应的显示效果如下:
    1010cc时时彩经典版 7

    现在,我们使用clearRect()方法对实心圆中以圆心(100,100)为中心,周边各10px的矩形区域部分进行擦除。

    JavaScript Code复制内容到剪贴板

    1. <script type="text/javascript">   
    2. //获取Canvas对象(画布)   
    3. var canvas = document.getElementById("myCanvas");   
    4. //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误   
    5. if(canvas.getContext){     
    6.     //获取对应的CanvasRenderingContext2D对象(画笔)   
    7.     var ctx = canvas.getContext("2d");   
    8.        
    9.     //绘制一个以坐标点(100,10)为圆心、半径为50px的圆形   
    10.     ctx.arc(100, 100, 50, 0, Math.PI * 2, false);   
    11.        
    12.     //绘制并填充圆形内部   
    13.     ctx.fill();   
    14.        
    15.     //擦除矩形区域内的图形   
    16.     ctx.clearRect(90, 90, 20, 20);   
    17. }   
    18. </script>  

    对应的显示效果如下(是不是有点像一个铜钱?)。
    1010cc时时彩经典版 8

    页面上我们可以擦除一片页面上的区域,让其显示出背景图片。
    下面的例子中我们擦除了矩形中的空白让其显示页面背景:

    JavaScript Code复制内容到剪贴板

    1. <!DOCTYPE html>   
    2. <html lang="zh">   
    3. <head>   
    4.     <meta charset="UTF-8">   
    5.     <title>clearRect()</title>   
    6.     <style>   
    7.         body { background: url("./images/bg2.jpg") repeat; }  
    8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
    9.     </style>   
    10. </head>   
    11. <body>   
    12. <div id="canvas-warp">   
    13.     <canvas id="canvas">   
    14.         你的浏览器居然不支持Canvas?!赶快换一个吧!!   
    15.     </canvas>   
    16. </div>   
    17.   
    18. <script>   
    19.     window.onload = function(){   
    20.         var canvas = document.getElementById("canvas");   
    21.         canvas.width = 800;   
    22.         canvas.height = 600;   
    23.         var context = canvas.getContext("2d");   
    24.         context.fillStyle = "#FFF";   
    25.         context.fillRect(0,0,800,600);   
    26.   
    27.         //清空画布   
    28.         context.clearRect(0,0,canvas.width,canvas.height);   
    29.   
    30.     };   
    31. </script>   
    32. </body>   
    33. </html>  

    1010cc时时彩经典版 9

    Canvas API中的clearRect()方法实现橡皮擦功能,html5clearrect 在现实世界中,我们使用画笔在画板上进行绘画;在html5 canvas中,我们同样可...

    <canvas id="canvas"></canvas>
    

    };

    <canvas>标签是h5新增的,通过脚本(通常是js)来绘制图形,canvas只是一个图形容器,或者说是画布。

    js

     for (var i = 1; i <10; i  ) {//开始一个新的绘制路径 ctx.beginPath(); //圆弧的旋转角度 circle.x = circle.x-0.342; circle.y = circle.y - 0.940; //沿着坐标点为圆心、半径为50px的圆的顺时针方向绘制弧线 ctx.arc(circle.x , circle.y, circle.r,65 * Math.PI / 180, 120 * Math.PI / 180, false); //按照指定的路径绘制弧线 ctx.stroke(); if  { ctx.save(); } } ctx.restore();//回复路径 } } catch  { alert(e.message); } } <!--绘制弧线 V0101--><div style="width: 150px;height:150px;position:absolute;z-index:3; left:5.76%;bottom:29.5%"> <canvas style="width:150px;height:150px;border: 1px solid red;"></canvas></div>
    

    canvas可以绘制路径、图形、字以及添加图像。

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    
    ctx.fillStyle = 'green'; //颜色必须在画出来之前
    ctx.fillRect(10, 10, 100, 100);
    

    1010cc时时彩经典版 10

    不建议用css控制canvas宽高,会等比缩放。852

    2、创建一个画布

    CanvasRenderingContext2D.fillRect()
    填充一个矩形
    参数分别为x,y,width,height。

    <canvas  id="can"  width="200" height="100"></canvas>

    CanvasRenderingContext2D.strokeRect()
    画出一个矩形边框。
    参数分别为x,y,width,height。

    canvas中需要指定一个id属性供脚本引用,width和height定义画布的大小。另外可以用style来添加画布边框。

    CanvasRenderingContext2D.clearRect()
    是 Canvas 2D API 设置指定矩形区域内(以 点 (x, y) 为起点,范围是(width, height) )所有像素变成透明,并擦除之前绘制的所有内容的方法。
    clearRect(x, y, width, height)

    <style type="text/css">
    canvas {
      border: #ccc solid 1px;
    }
    </style>

    CanvasRenderingContext2D.beginPath()
    是 Canvas 2D API 通过清空子路径列表开始一个新路径的方法。 当你想创建一个新的路径时,调用此方法。

    3、使用js绘制图像

    CanvasRenderingContext2D.moveTo()
    是 Canvas 2D API 将一个新的子路径的起始点移动到(x,y)坐标的方法。
    ctx.moveTo(x, y)

    canvas本身没有绘图能力,所有的绘图工作必须在js内部完成:

    CanvasRenderingContext2D.lineTo()
    是 Canvas 2D API 使用直线连接子路径的终点到x,y坐标的方法(并不会真正地绘制)。
    ctx.lineTo(x, y);

    首先找到canvas元素:

    CanvasRenderingContext2D.stroke()
    是 Canvas 2D API 使用非零环绕规则,根据当前的画线样式,绘制当前或已经存在的路径的方法。

    var  can=document.getElementById("can");

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    
    ctx.beginPath();
    ctx.moveTo(50,50);
    ctx.lineTo(200, 50);
    ctx.stroke();
    

    其次创建context对象(getContext("2d")对象是内建的H5对象,拥有多种绘制图形方法):

    beginPath()开始 ,moveTo()移动画笔,lineTo()决定要从画笔现在位置连接到的坐标并移动到该坐标,
    stroke()画出这条线。

    var  ctx=can.getContext("2d");

    1010cc时时彩经典版 11

    设置填充图形的颜色:

    image.png

    ctx.fillStyle="#FF0000";    // fillStyle可以是css颜色,渐变,或图案,默认设置是黑色(#000000)

    CanvasRenderingContext2D.fill()
    是 Canvas 2D API 根据当前的填充样式,填充当前或已存在的路径的方法。采取非零环绕或者奇偶环绕规则。

    定义矩形:

    CanvasRenderingContext2D.fillStyle
    ctx.fillStyle = color;
    ctx.fillStyle = gradient;//填充渐变的对象CanvasRenderingContext2D.createLinearGradient(), CanvasRenderingContext2D.createRadialGradient()

    ctx.fillRect(0,0,150,70);    //  fillRect(x,y,width,height)定义了矩形及其长宽

    ctx.fillStyle = pattern;//重复的对象

    4、Canvas坐标

    填充出一个三角形

    canvas是一个二维网格。cancas的左上角坐标为(0,0),上面的fillRect方法的参数(0,0,150,70)意思就是从左上角(0,0)开始在画布上绘制一个150*70的矩形。

    ctx.beginPath();
    ctx.moveTo(10,10);
    ctx.lineTo(50,10);
    ctx.lineTo(30,30);
    ctx.fillStyle='red';
    ctx.fill();
    

    5、Canvas路径

    1010cc时时彩经典版 12

    画线:

    image.png

    本文由1010cc时时彩经典版发布于1010cc时时彩客户端,转载请注明出处:1010cc时时彩经典版位置不是第一次开始的位置,

    关键词: