canvas基础绘制-arc

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>arc</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #ddd;"></canvas>
<script>
    //draw an arc画曲线
    var canvas = document.getElementById("canvas");

    canvas.width = 1024;
    canvas.height = 768;

    var context = canvas.getContext("2d");

    context.lineWidth = 5;
    context.strokeStyle = "#058";
    context.arc(300,300,200,0,0.5*Math.PI,true);
    //context.arc(
    //conterx,contery,radius,//圆心坐标x,圆心坐标y,半径
    //startingAngle,endingAngle,//起始弧度值,终止弧度值
    //anticlockwise = false//false顺时针绘制,true逆时针绘制
    // );
    context.stroke();
</script>
</body>
</html>

绘制单个圆:

绘制多个圆:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>arc*n</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #ddd"></canvas>
<script>
    var canvas = document.getElementById("canvas");

    canvas.width = 1024;
    canvas.height = 768;

    var context = canvas.getContext("2d");

    context.lineWidth = 5;
    context.strokeStyle = "#058";
    for(var i=0;i<10;i++){
        context.beginPath();//重新开始新的路径
        context.arc(50+100*i,60,40,0,2*Math.PI*(i+1)/10);
        context.closePath();//结束当前路径,自动绘制封闭未封闭的线段

        context.stroke();
    }
    for(var i=0;i<10;i++){
        context.beginPath();//重新开始新的路径
        context.arc(50+100*i,180,40,0,2*Math.PI*(i+1)/10);

        context.stroke();
    }
    for(var i=0;i<10;i++){
        context.beginPath();//重新开始新的路径
        context.arc(50+100*i,300,40,0,2*Math.PI*(i+1)/10,true);
        context.closePath();//结束当前路径,自动绘制封闭未封闭的线段

        context.stroke();
    }
    for(var i=0;i<10;i++){
        context.beginPath();//重新开始新的路径
        context.arc(50+100*i,420,40,0,2*Math.PI*(i+1)/10,true);

        context.stroke();
    }
    //填充图形;

    context.fillStyle = "#058";
    for(var i=0;i<10;i++){
        context.beginPath();//重新开始新的路径
        context.arc(50+100*i,540,40,0,2*Math.PI*(i+1)/10);

        context.fill();
    }
</script>
</body>
</html>

时间: 2024-10-14 10:20:39

canvas基础绘制-arc的相关文章

canvas基础绘制-绚丽倒计时

效果图: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ball</title> <script src="digit_1.js"></script> <script src="countdown.js"></

canvas基础绘制-绚丽时钟

效果图: 与canvas基础绘制-绚丽倒计时的代码差异: // var endTime = new Date();//const声明变量,不可修改,必须声明时赋值: // endTime.setTime( endTime.getTime() + 3600*1000);//当前时间向后一小时: var curShowTimeSeconds = 0; function getCurrentShowTimeSeconds() { var curTime = new Date();//获取目前时间: /

canvas基础——绘制简单的图形

绘制直线: HTML部分: 1 <canvas id="myCanvas" style="border:1px solid #000;" width="200px" height="100px"></canvas> JS部分: 1 window.onload = function(){ 2 var c = document.getElementById('myCanvas'); 3 var contex

canvas基础绘制-倒计时(上)

效果: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>digit</title> </head> <body> <canvas id="canvas"></canvas> <script src="digit

canvas基础绘制-倒计时(下)

digit_1.js: digit = [ [ [0,0,1,1,1,0,0], [0,1,1,0,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,0,1,1,0], [0,0,1,1,1,0,0] ],//0 [ [0,0,0,1,1,0,0], [0,1,1,1,1,0,0], [0,0,0,1,1,0,0]

canvas基础知识

低版本的ie不支持html5,需要引入excanvas.js来让ie支持canvas.检测<canvas id="canvas" width="150" height="200" > 你的浏览器不支持canvas</canvas>var canvas = document.getElementById('canvas');if(canvas.getContext) alert('支持canvas'); >> 绘

HTML5使用Canvas来绘制图形

一.Canvas标签: 1.HTML5<canvas>元素用于图形的绘制,通过脚本(通常是javascript)来完成. 2.<canvas>标签只是图形容器,必须使用脚本来绘制图形. 3.可以通过多种方法通过Canvas绘制路径.盒.圆.字符以及添加图像. 二.Canvas绘制图形 1.绘制矩形 2.绘制圆形 3.moveTo和lineTo 4.使用bezierCurveTo绘制贝塞尔曲线 5.绘制线性渐变 6.绘制径向渐变 7.绘制变形图形 8.绘制图形合成gloablComp

五分钟学会 Canvas 基础(二)

0. 前言 相信各位小伙伴读了之前的文章,对 Canvas 基础已经有了一定的认识和了解,但是大家也一定记得我在上一篇文章留了一个小的坑. 就是我没有告诉大家该如何去绘制圆,之所以没有说是因为绘制圆实际上是因为 CanvasRenderingContext2D 对象只提供了两个绘制矩形的方法,并没有直接提供绘制圆,椭圆等几何图形的方法.为了在 Canvas 上绘制更复杂的方法,必须在 Canvas 上启用路径,借用路径来绘制图形. 那么我们现在就一起来看一看,该如何使用路径来绘制圆等图形吧. -

11.分钟学会 Canvas 基础(二)

0. 前言 相信各位小伙伴读了之前的文章,对 Canvas 基础已经有了一定的认识和了解,但是大家也一定记得我在上一篇文章留了一个小的坑. 就是我没有告诉大家该如何去绘制圆,之所以没有说是因为绘制圆实际上是因为 CanvasRenderingContext2D 对象只提供了两个绘制矩形的方法,并没有直接提供绘制圆,椭圆等几何图形的方法.为了在 Canvas 上绘制更复杂的方法,必须在 Canvas 上启用路径,借用路径来绘制图形. 那么我们现在就一起来看一看,该如何使用路径来绘制圆等图形吧. -