html5 方形显示圆形
2016-09-08 23:46:05 u012868077 阅读数 1164
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
        <title></title>
    </head>
    <body>
        <h2>圆形渐变</h2>
        <canvas id="mc" width="400" height="280" style="border:1px solid black"></canvas>
        <script>
            var canvas=document.getElementById('mc');
            var ctx=canvas.getContext('2d');
            ctx.save();
            ctx.translate(30,20);
            lg=ctx.createRadialGradient(80,40,5,80,40,60);
            lg.addColorStop(0.2,"#f00");
            lg.addColorStop(0.5,"#0f0");
            lg.addColorStop(0.9,"#00f");
            ctx.fillStyle=lg;
            ctx.fillRect(0,0,160,80);
            ctx.restore();
            ctx.translate(280,160);
            ctx.beginPath();
            ctx.arc(0,0,80,0,Math.PI*2,true);
            ctx.closePath();
            ctx.lineWidth=12;
            lg2=ctx.createRadialGradient(0,0,5,0,0,80);
            lg2.addColorStop(0.1,"#ff0");
            lg2.addColorStop(0.4,"#0ff");
            lg2.addColorStop(0.8,"#f0f");
            ctx.fillStyle=lg2;
            ctx.fill();
        </script>
    </body>
</html>

这里写图片描述

2017-08-15 10:07:34 milijiangjun 阅读数 1851

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.addBg {
    width: 100px;
    height: 100px;
    background-color: rgba(113,228,250,1);
    border-radius: 100px;
    -webkit-border-radius: 100px;
    position: absolute;
  
}




</style>


</head>
<body>

<div class="addBg scaleAm" ></div>
</body>
</html>

如图

2015-12-14 17:59:44 sly94 阅读数 243

<!DOCTYPE HTML>
<body>
<canvas id="myCanvas" width="800" height="600" >
aaaa
</canvas>
<script type="text/javascript">
/*
圆弧arc(x,y,radius,starAngle,endAngle,anticlockwise)
x:圆心的x坐标
y:圆心的y坐标
radius:圆的半径
starAngle:开始角度
endAngle:结束角度
anticlockwise:是否逆时针(true)为逆时针,(false)为顺时针
顺时针(钟表走的方向)
*/

function drawCircle(){
var can = document.getElementById("myCanvas");
var cxt = can.getContext("2d");
//起始一条路径,或重置当前路径
cxt.beginPath();
cxt.arc(200,150,100,0,Math.PI*0.5,true);
cxt.closePath();
cxt.fillStyle="rgba(0,255,0,0.25)";
cxt.fill();
}
drawCircle();
</script>
</body>

解释:

cxt.arc(200,150,100,0,Math.PI*0.5,true);

期望:Math.PI*0.5应该是1/4的圆
原因:arc方法是用来创建一条弧线的,而如果直接将弧线的起点和终点闭合,再进行填充,自然绘制出的是上面的图形了。



2015-08-07 16:17:41 u011102207 阅读数 1383

canvas绘制圆形的思路:

1、创建路径 XXX.beginpath();

2、创建圆形的路径;

3、关闭路径;XXX.closepath(); 路径不关闭也能绘制出图形

4、设定绘制样式。

创建圆形路径时需要用到对象的arc方法,方法定义如:XXX.arc(x,y,radius,startAngle,endAngle,counterclockwise)

x为圆形起点的横坐标,y为圆形起点的纵坐标,(x,y)为圆心,radius为圆形半径,startAngle为开始角度,endAngle为结束角度,counterclockwise是否按逆时针方向进行绘制。

,值为false表示按顺时针方向计算。
<!DOCTYPE html>
<meta charset="utf-8">
<head>
</head>

<body>
<canvas id="yuanxing" width="1000" height="1000"></canvas>
<script type=text/javascript>
var canvas=document.getElementById("yuanxing");
var context=canvas.getContext("2d");
context.fillStyle="#FF0000";
context.beginPath();
context.arc(200,200,200,0,Math.PI*2,true); //Math.PI*2是JS计算方法,是圆
context.closePath();
context.fill();
</script>
</body>
</html>


2018-09-23 00:37:00 weixin_33847182 阅读数 40

HTML示例:

<canvas id="canvas" style="width:400;height:300"></canvas>

JS示例:

var context = document.getElementById("canvas").getContext("2d");
context.beginPath();
// 绘制圆,参数(x坐标,y坐标,圆半径,起始角度,终止角度)
context.arc(0, 0, 50, 0, 2*Math.PI);
// 填充颜色
context.fillStyle= "red";
// 开始填充
context.fill();
context.closePath();

HTML5之Canvas画圆形

阅读数 2779

HTML5之Canvas画圆形1、设计源码HTML5之Canvas画圆形 varcanvas=document.getElementById("canvas"); varcontext=canvas.getContext("2d"); context.fillStyle="#0000ff"; context.beginPath();

博文 来自: you23hai45

【Html5】canvas绘制圆形

阅读数 4625

上一篇中写了滤镜的效果,这一次把滤镜效果写在圆上,和上一篇原理是一样的先截个图:代码如下 varmyCanvas=document.getElementById("myCanvas"); varcontext=myCanvas.getContext("2d"); context.fillStyle="#e4e4e4";

博文 来自: boiaprogramfan0420

HTML5——Canvas_01之【绘制圆形】

阅读数 144

&lt;!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt;&lt;head&gt;&lt;metahttp-equiv="Content-Type"content="text/html;ch

博文 来自: Superstatus

HTML5之Canvas画圆形

阅读数 46

HTML5之Canvas画圆形1、设计源码&lt;!DOCTYPEhtml&gt;&lt;head&gt;&lt;metacharset="utf-8"/&gt;&lt;title&gt;HTML5之Canvas画圆形&lt;/title&gt;&lt;/head&gt;&lt;bodyonLoad="drawFour('canvas')&

博文 来自: iteye_8264

html5 canvas 圆形抽奖的实例

阅读数 13

年底没啥,抽空学习了canvas,写了个html5抽奖的代码,造了个轮子,有用的童鞋可以拿走。其中,canvas.onclick触发抽奖行为,概率可以在core.lottery()函数上添加,美化也可以替换上图,嘿嘿,给大家做个事例,如有bug,请以评论的形式提出。 代码如下复制代码&lt;!doctypehtml&gt;&lt;htmllang="...

博文 来自: weixin_33910385
没有更多推荐了,返回首页