39.canvas画个饼图

css

*{
     margin: 0;
     padding: 0;
     margin-top: 10vh;
}
body{
     text-align: center;
}
canvas{
    margin: 0 auto;
    border: 1px solid #CCCCCC;
}

js

<script type="text/javascript">
            window.addEventListener(‘load‘,function(){
                var canvas = document.createElement(‘canvas‘)
                document.body.appendChild(canvas)
                canvas.id = ‘myCanvas‘
                canvas.width = 400;
                canvas.height= 400;
                var myCanvas = document.getElementById(‘myCanvas‘)

                //检测浏览器是否支持canvas属性
                if(!myCanvas||!myCanvas.getContext){
                    return
                }

                var ctx = myCanvas.getContext(‘2d‘)
                drawScreen()
                function drawScreen(){
                    var deg = Math.PI/180
                    var obj = {
                        x:200,
                        y:200,
                        r:80,
                        sDeg:[30,111,190,233,280,345],
                        eDeg:[111,190,233,280,345,30],
                        style:[‘#f00‘,‘#0f0‘,‘#00f‘,‘#789‘,‘#abcdef‘]
                    }
                    for (var i = 0; i < obj.sDeg.length; i++) {
                        drawPie(ctx,obj.x, obj.y, obj.r, obj.sDeg[i] * deg, obj.eDeg[i] * deg);
                        ctx.fill();
                        ctx.fillStyle = obj.style[i];
                    }
                }
                function drawPie(ctx,x,y,r,sDeg,eDeg){
                    //保存初始状态
                    ctx.save()

                    //位移到目标点
                    ctx.translate(x,y)
                    ctx.beginPath()

                    //画出圆弧
                    ctx.arc(0,0,r,sDeg,eDeg)

                    //再次保存以备旋转
                    ctx.save()
                    //旋转至起始角度
                    ctx.rotate(eDeg)
                    //移动到终点,连接终点与圆心
                    ctx.moveTo(r,0)
                    ctx.lineTo(0,0)
                    //还原
                    ctx.restore()
                    //旋转至起点位置
                    ctx.rotate(sDeg)
                    //从圆心连接到起点位置
                    ctx.lineTo(r,0)
                    ctx.closePath()
                    //还原到最初的状态
                    ctx.restore()

                }
            },false)

        </script>
时间: 2024-11-10 14:04:07

39.canvas画个饼图的相关文章

用canvas画圆饼图

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>小熊圆饼图</title> <meta charset="gbk"> <script> //绘制饼图 function drawCircle(canvasId, data_arr, color_arr, tex

html5学习(一)--canvas画时钟

利用空余时间学习一下html5. 1 <!doctype html> 2 <html> 3 <head></head> 4 <body> 5 <canvas id="clock" width="500" height="500"></canvas> 6 <script> 7 var clock=document.getElementById('cloc

canvas画的北斗七星和大熊座

用canvas画的北斗七星和大熊座,主要用到的知识点是:canvas.定时器. html代码: 1 <body> 2 <canvas id="canvas" width="1250px" height="670px"> 3 4 </canvas> 5 6 </body> css代码: 1 body{ 2 background-color:#0B0B0D; 3 } 4 5 #canvas{ 6 pos

Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)

1.首先说一下canvas类: Class OverviewThe Canvas class holds the "draw" calls. To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw calls (writing into the bitmap), a drawing primitive (e.g. Rect, Path,

canvas画简单圆形动画

HTML: 1 <html> 2 <head> 3 <title>canvas画圆</title> 4 <meta http-equiv="content-type" content="text/html" charset="utf-8"> 5 <link rel="stylesheet" href="circle.css"/> 6 &

(转)Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)

来自:http://blog.csdn.net/rhljiayou/article/details/7212620 1.首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw calls (writi

html5中用canvas画八大行星围绕太阳转

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8&

Android利用canvas画各种图形

canvas通俗的说就是一张画布,我们可以使用画笔paint,在其上面画任意的图形. 原理: 可以把canvas视为Surface的替身或者接口,图形便是绘制在Surface上的.Canvas封装了所有的绘制调用.通过Canvas, 绘制到Surface上的内容首先存储到一个内存区域(也就是对应的Bitmapz中),该Bitmap最终会呈现到窗口上. 使用: 1.Canvas可以直接new Canvas(): 2.在View中重写OnDraw()方法,里面有一个Canvas,今天讨论的内容. 方

安卓用canvas画曲线图

1.新建一个常变量类Constant.java package com.rain.db; import android.graphics.Point; public class Constant { public static Point point;//获取屏幕的大小 } 2.新建一个函数ChartView.java 1 package com.rain.kongjian; 2 3 import com.rain.db.Constant; 4 5 import android.content.