canvas绘制圆

canvas绘制圆：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas绘制圆</title>
<style>
canvas{border:1px solid black;}
</style>
<script>
window.onload=function(){
    var ctx=document.getElementById(‘sample‘).getContext(‘2d‘);
    /*圆1*/
    ctx.beginPath();
    ctx.arc(150,45,35,0,Math.PI*2,false);
    ctx.fillStyle="rgba(198,80,77,0.7)";  // 半透明红色
    ctx.fill();
    ctx.strokeStyle="rgba(198,80,77,1)" ;  //红色
    ctx.stroke();

    /*圆2*/
    ctx.beginPath();
    ctx.arc(125,95,35,0,Math.PI*2,false);
    ctx.fillStyle="rgba(155,187,89,0.7)";  // 半透明绿色
    ctx.fill();
    ctx.strokeStyle="rgba(155,187,89,1)";   //绿色
    ctx.stroke();

    /*圆3*/
    ctx.beginPath();
    ctx.arc(175,95,35,0,Math.PI*2,false);
    ctx.fillStyle="rgba(128,100,162,0.7)";  // 半透明紫色
    ctx.fill();
    ctx.strokeStyle="rgba(128,100,162,1)" ;  //紫色
    ctx.stroke();
    }
</script>
</head>

<body>
<canvas id="sample" width="300" height="150"></canvas>
</body>
</html>

时间： 2024-10-25 09:17:26

canvas绘制圆的相关文章

canvas绘制圆和弧（三）

利用context的方法,进行圆和弧的绘制 context.arc(x,y,radius,startingAngle,endingAngle,anticlockwise); x,y:表示圆心坐标 radius:圆的半径 startingAngle:绘制圆弧的起始位置(弧度制,比如0,0.5*Math.PI.....) endingAngle:绘制圆弧的终止位置 anticlockwise:false和true,true表示逆时针,false表示顺时针.不写默认false 和绘制直线一样,你可以把

canvas二：绘制圆和其他曲线

1.绘制圆绘制圆是canvas里面不可缺少的功课,而且绘制圆在canvas中的用处很多,好嘞,开扯绘制圆需要用到arc这个方法: arc(X坐标,Y坐标,半径,起始弧度,结束弧度,旋转方向): 弧度与角度的关系:弧度 = 角度*Math.PI/180: 旋转方向:true(逆时针),false(顺时针),默认为顺时针: 实例:我想画一个半圆,先里一下思路,首先我们需要一个区域,也就是绘制路径,即beginPath, 然后我们再需要定义一个开始的绘制点,即moveTo,之后在进行绘圆操作,那么

canvas绘制时钟

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas绘制钟表</title> <style type="text/css"> #canvas{ /*border: 2px solid red;*/ display: block; margin: 0 auto; } </style> </

用h5中的canvas 绘制八卦图

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>canvas绘制八卦图</title> 6 </head> 7 8 <body> 9 <canvas id="canvas" width="600" height="500"><

使用Canvas绘制图形的基本教程

原文地址:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以也要好好学习一把. 好好看了一下Canvas的功能,感觉HTML5在客户端交互的功能性越来越强了,今天看了一下Canvas绘图,下边是几个实例,记下以备后用. 1.使用Canvas绘制直线: <!doctype html> <html> <head> <meta ch

HTML5 Canvas绘制环形进度条

最近比较迷恋canvas,加之做了一个个人网站,有用到环形进度条,记录下来. canvas中没有直接绘制圆的方法,但有一个绘制弧线的context.arc方法, 下面讲下用该方法如何绘制出图片效果. arc()方法介绍 context.arc(x,y,r,sAngle,eAngle,counterclockwise); 参数说明: x: 圆的中心的 x 坐标 y: 圆的中心的 y 坐标 r: 圆的半径 sAngle: 起始角,以弧度计.(弧的圆形的三点钟位置是 0 度) eAngle: 结束角,

使用html5 canvas绘制圆形或弧线

注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链接以了解使用html5 canvas绘制图形的完整内容. 在html5中,CanvasRenderingContext2D对象也提供了专门用于绘制圆形或弧线的方法,请参考以下属性和方法介绍: arc(x, y, radius, startRad, endRad, anticlockwise) 在canvas画

canvas绘制直线多边形（二）

在绘制之前,依据上一节所说的内容获取context 2维画布 1 context.moveTo(x,y); 定义绘图开始 2 context.lintTo(x1,y1); 定义线条画到的位置 3 context.lineWidth=5; //线条宽度 4 context.strokeStyle="red" //线条颜色 5 context.stroke(); //用于绘制线条利用上述代码我们可以绘制一条,从(x,y)坐标开始,到(x1,y1)结束的宽5个像素,颜色为红色的直线

canvas 绘圆加边框

HTML5中canvas元素,绘制圆形需要使用路径,开始时要取得图形上下文,首先使用路径来勾勒图形的轮廓,然后设置颜色,进行绘制. arc(cx,cy,radius,start_angle,end_angle,direction); cx 水平坐标 cy 垂直坐标 radius 圆心 start-angel 圆周起始位置 (以圆心为参考点,不是以坐标原点为参考点.下面配图详细解释) end_angle 圆周结束位置 Math.PI是半圆 Math.PI*2是整个圆 0.5为四分之一