CSSで扇形を任意の角度で描く方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSで扇形を任意の角度で描く方法

高洛峰

Feb 22, 2017 am 11:54 AM

css

扇形の制作の原理は、下部に単色のプロトタイプがあり、内側に同じ色の2つの半円があり、内側の半円は特定の角度で変化して扇形の効果を生み出します

。

<html>
<head>
    <meta charset="UTF-8">
    <title>扇形绘制</title>
    <style>
        .shanxing{
            position: relative;
            width: 200px;
            height: 200px;
            border-radius: 100px;
            background-color: yellow;
        }
        .sx1{
            position: absolute;
            width: 200px;
            height: 200px;
            transform: rotate(0deg);
            clip: rect(0px,100px,200px,0px); /*这个clip属性用来绘制半圆，在clip的rect范围内的内容显示出来，使用clip属性，元素必须是absolute的 */
            border-radius: 100px;
            background-color: #f00;
            /*-webkit-animation: an1 2s infinite linear; */
        }


        .sx2{
            position: absolute;
            width: 200px;
            height: 200px;
            transform: rotate(0deg);
            clip: rect(0px,100px,200px,0px);
            border-radius: 100px;
            background-color: #f00;
            /*-webkit-animation: an2 2s infinite linear;*/
        }
        /*绘制一个60度扇形*/
        .shanxing1 .sx1{transform: rotate(-30deg);}
        .shanxing1 .sx2{transform: rotate(-150deg);}

        /*绘制一个85度扇形*/
        .shanxing2 .sx1{transform: rotate(-45deg);}
        .shanxing2 .sx2{transform: rotate(-140deg);}

        /*绘制一个向右扇形，90度扇形*/
        .shanxing3 .sx1{transform: rotate(45deg);}
        .shanxing3 .sx2{transform: rotate(-45deg);}

        /*绘制一个颜色扇形 */
        .shanxing4 .sx1{transform: rotate(45deg);background-color: #fff;}
        .shanxing4 .sx2{transform: rotate(-45deg);background-color: #fff;}

        /*绘制一个不同颜色半圆夹角 */
        .shanxing5 .sx1{transform: rotate(45deg);background-color: #f00;}
        .shanxing5 .sx2{transform: rotate(-45deg);background-color: #0f0;}
</style>
</head>

<body>

    扇形制作原理，底部一个纯色原形，里面2个相同颜色的半圆，可以是白色,内部半圆按一定角度变化，就可以产生出扇形效果
    <p>/*绘制一个60度扇形*/</p>
<div class="shanxing shanxing1">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>
<p>/*绘制一个85度扇形*/</p>
<div class="shanxing shanxing2">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>
<p>/*绘制一个向右扇形，90度扇形*/</p>
<div class="shanxing shanxing3">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>
<p>/*绘制一个颜色扇形 */</p>
<div class="shanxing shanxing4">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>

<p>/*绘制一个不同颜色半圆夹角 */</p>
<div class="shanxing shanxing5">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>


</body> 
</html>

以下は css+html5+javascript の組み合わせですより複雑なリンググラフィックス

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>circle</title>
    
    <style type="text/css">
    #myCanvas{}
    #nihao{
      position: absolute;
      top:10px;
      z-index: 1;
    }
    </style>
  </head>
<body style="background:#FBFBFB;">

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
not suopport canvas

</canvas>
<div id="nihao"></div>
<script>
var text=document.getElementById("nihao");
text.innerHTML="woshiwuxinguo";
var i=0.9;//这里默认设置好评率为90%

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineWidth=10;
ctx.strokeStyle="gray";
ctx.arc(100,75,50,0,2*Math.PI);
ctx.fillStyle="#FBFBFB";
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.translate(100,75);
ctx.rotate(-90*Math.PI/180);
ctx.strokeStyle="#FFCFCF";
ctx.arc(0,0,50,0,2*Math.PI*i);
ctx.stroke();
c.addEventListener("mouseover", function(e) {
ctx.beginPath();
ctx.strokeStyle="gray";
ctx.arc(0,0,50,0,2*Math.PI);
ctx.stroke();
var finish=i;
var step=0;
var internal=setInterval(function(e) {
console.log("step:"+step);
    if(step<finish){
    step=step+0.01;
    ctx.beginPath();
    ctx.strokeStyle="#FFCFCF";
    ctx.arc(0,0,50,0,2*Math.PI*step);
    ctx.stroke();
    }else{
    clearInterval(internal);
    }
}, 0.5)
}, true)

</script> 

</body>
</html>

任意の角度で扇形を描画する方法に関するその他の CSS 関連の記事については、PHP 中国語 Web サイトに注目してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

利用CSS怎么创建渐变色边框？5种方法分享Oct 13, 2021 am 10:19 AM

利用CSS怎么创建渐变色边框？下面本篇文章给大家分享CSS实现渐变色边框的5种方法，希望对大家有所帮助！

css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM

在css中，可用list-style-type属性来去掉ul的圆点标记，语法为“ul{list-style-type:none}”；list-style-type属性可设置列表项标记的类型，当值为“none”可不定义标记，也可去除已有标记。

css与xml的区别是什么Apr 24, 2022 am 11:21 AM

区别是：css是层叠样式表单，是将样式信息与网页内容分离的一种标记语言，主要用来设计网页的样式，还可以对网页各元素进行格式化；xml是可扩展标记语言，是一种数据存储语言，用于使用简单的标记描述数据，将文档分成许多部件并对这些部件加以标识。

css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM

在css中，可以利用cursor属性实现鼠标隐藏效果，该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状，当属性值设置为none时，就可以实现鼠标隐藏效果，语法为“元素{cursor:none}”。

rtl在css是什么意思Apr 24, 2022 am 11:07 AM

在css中，rtl是“right-to-left”的缩写，是从右往左的意思，指的是内联内容从右往左依次排布，是direction属性的一个属性值；该属性规定了文本的方向和书写方向，语法为“元素{direction:rtl}”。

css怎么设置i不是斜体Apr 20, 2022 am 10:36 AM

在css中，可以利用“font-style”属性设置i元素不是斜体样式，该属性用于指定文本的字体样式，当属性值设置为“normal”时，会显示元素的标准字体样式，语法为“i元素{font-style:normal}”。

css怎么实现英文小写转为大写Apr 25, 2022 pm 06:35 PM

转换方法：1、给英文元素添加“text-transform: uppercase;”样式，可将所有的英文字母都变成大写；2、给英文元素添加“text-transform:capitalize;”样式，可将英文文本中每个单词的首字母变为大写。

怎么设置rotate在css3的旋转中心点Apr 24, 2022 am 10:50 AM

在css3中，可以用“transform-origin”属性设置rotate的旋转中心点，该属性可更改转换元素的位置，第一个参数设置x轴的旋转位置，第二个参数设置y轴旋转位置，语法为“transform-origin:x轴位置 y轴位置”。

See all articles

ホットAIツール

ホットツール

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーションサーバーと統合します。

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、