htmlcanvas饼状图代码（html绘制饼图）

本篇文章给大家谈谈htmlcanvas饼状图代码，以及html绘制饼图对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、使用HTML5 Canvas 画出以下图形！
• 2、如何让基于html5 canvas的图表插件chart.js中的柱状图形横向显示
• 3、HTML5 Canvas基本绘制线条教程
• 4、如何使用jquery和html5制作饼图
• 5、怎么使用canvas循环生成饼图
• 6、如何使用HTML5 Canvas动态的绘制拓扑图

使用HTML5 Canvas 画出以下图形！

颜色真难弄 没找到规律 你研究下吧

!DOCTYPE HTML

html

style

#myCanvas{

width: 400px;

height: 200px;

}

/style

body

canvas id="myCanvas"your browser does not support the canvas tag /canvas

script type="text/javascript"

var canvas=document.getElementById('myCanvas');

var c=canvas.getContext('2d');

//红色

c.fillStyle='#f00';

c.fillRect(0,0,10,10);

c.fillStyle='#f22';

c.fillRect(0,12,10,10);

c.fillStyle='#f44';

c.fillRect(0,24,10,10);

c.fillStyle='#f88';

c.fillRect(0,36,10,10);

c.fillStyle='#faa';

c.fillRect(0,48,10,10);

c.fillStyle='#fcc';

c.fillRect(0,60,10,10);

c.fillStyle='#fee';

c.fillRect(0,72,10,10);

//紫色

c.fillStyle='#f0a';

c.fillRect(12,0,10,10);

c.fillStyle='#e550a1';

c.fillRect(12,12,10,10);

c.fillStyle='#e960a8';

c.fillRect(12,24,10,10);

c.fillStyle='#ed86db';

c.fillRect(12,36,10,10);

c.fillStyle='#f2a6cd';

c.fillRect(12,48,10,10);

c.fillStyle='#f7c0dd';

c.fillRect(12,60,10,10);

c.fillStyle='#fce2ef';

c.fillRect(12,72,10,10);

/script

/body

/html

如何让基于html5 canvas的图表插件chart.js中的柱状图形横向显示

chart.js是一款基于HTML5 Canvas的图表插件，chart.js的功能非常强大，它不仅提供了常见的柱形图、折线图、饼状图，而且还提供了环形图、雷达图，样式外观多样，图表的色彩搭配也比较清新。chart.js还有一个特点就是图表在初始化的时候有弹性动画特效，这也是HTML5 Canvas的一大功劳。

HTML5 Canvas基本绘制线条教程

HTML5 Canvas基本绘制线条教程

怎么画线条？和现实中画画差不多：

1.移动画笔，使画笔移动至绘画的开始处

2.确定第一笔的停止点

3.规划好之后，选择画笔（包括画笔的粗细和颜色等）

4.确定绘制

因为Canvas是基于状态的绘制（很重要，后面会解释），所以前面几步都是在确定状态，最后一步才会具体绘制。

1.移动画笔(moveTo())

之前我们获得了画笔context，所以以此为例，给出改方法的使用实例——context.moveTo(100,100)。这句代码的意思是移动画笔至(100,100)这个点（单位是px）。记住，这里是以canvas画布的左上角为笛卡尔坐标系的原点，且y轴的正方向向下，x轴的正方向向右。

2.笔画停点(lineTo())

同理，context.lineTo(600,600)。这句的意思是从上一笔的停止点绘制到(600,600)这里。不过要清楚，这里的moveTo()``lineTo()都只是状态而已，是规划，是我准备要画，还没有开始画，只是一个计划而已！

3.选择画笔

这里我们暂且只设置一下画笔的颜色和粗细。

context.lineWidth = 5，这句话的意思是设置画笔(线条)的粗细为10px。

context.strokeStyle = "#AA394C"，这句话的意思是设置画笔(线条)的颜色为玫红色。

因为Canvas是基于状态的绘制，所以我们在选择画笔粗细和颜色的同时，其实也是选择了线条的粗细和颜色。

4.确定绘制

确定绘制只有两种方法，fill()和stroke()，有点绘画基础的应该知道，前者是指填充，后者是指描边。因为我们只是绘制线条，所以只要描边就可以了。调用代码context.stroke()即可。

画一个线条

不就一条线段吗！废话了这么多！那我们就开始画吧。

JavaScript Code复制内容到剪贴板你的浏览器居然不支持Canvas？！赶快换一个吧！！

运行结果：

我还标注了一个页面解析图，供大家参考。

这里我将原本

标签中的width和height去掉了，但在JavaScript代码中设置了canvas对象的width和height的属性。

小结：要设置画布的大小，只有这两种方法

1.在标签中设置；

2.在JS代码中设置canvas的'属性.

怎么样，是不是非常的酷。接下来我们要加快脚步了，绘制一个多线条组成的图形。是不是感觉自己离艺术家又进了一步呢？别看这只是简简单单的一条线段，这一画只是我们的一小步，但却是人类的一大步！

绘制折线

上面我们已经成功绘制了一条线段。那么，如果我要绘制有两个笔画甚至是很多笔画的折线怎么办呢？

聪明的小伙伴肯定已经想到了，这还不简单，复用lineTo()就可以了。下面我就献丑随便画了一条优美的折线~

JavaScript Code复制内容到剪贴板你的浏览器居然不支持Canvas？！赶快换一个吧！！

运行结果：

绘制多条折线

那同理，我们要绘制多条样式各不相同的折线怎么办呢？比如我们在这里画三条折线，分别是红色、蓝色、黑色。聪明的小伙伴肯定想到了，这还不简单，只需要平移一下再改下画笔颜色就行了。代码格式都一样的，复制就可以了。代码如下。

JavaScript Code复制内容到剪贴板你的浏览器居然不支持Canvas？！赶快换一个吧！！

运行结果：

咦？是不是很奇怪？说好的先红色，再蓝色，再黑色呢？怎么全是黑色了？其实，这里的原因是我之前一直强调的一点——Canvas是基于状态的绘制。

什么意思呢？其实这段代码每次使用stroke()时，它都会把之前设置的状态再绘制一遍。第一次stroke()时，绘制一条红色的折线；第二次stroke()时，会再重新绘制之前的那条红色的折线，但是这个时候的画笔已经被更换成蓝色的了，所以画出的折线全是蓝色的。换言之，strokeStyle属性被覆盖了。同理，第三次绘制的时候，画笔颜色是最后的黑色，所以会重新绘制三条黑色的折线。所以，这里看到的三条折线，其实绘制了3次，一共绘制了6条折线。

那么，我想绘制三条折线，难道就没有办法了吗？艺术家之魂到此为止了么？没救了么？不，还有办法。

使用beginPath()开始绘制

为了让绘制方法不重复绘制，我们可以在每次绘制之前加上beginPath()，代表下次绘制的起始之处为beginPath()之后的代码。我们在三次绘制之前分别加上context.beginPath()。

JavaScript Code复制内容到剪贴板你的浏览器居然不支持Canvas？！赶快换一个吧！！

可以看到，这里得到了我们预想的结果。因为使用了beginPath()，所以这里的绘制过程如我们所想的那样，只绘制了三次，而且每次只绘制一条折线。beginPath()是绘制设置状态的起始点，它之后代码设置的绘制状态的作用域结束于绘制方法stroke()、fill()或者closePath()，至于closePath()之后会讲到。

所以我们每次开始绘制前都务必要使用beginPath()，为了代码的完整性，建议大家在每次绘制结束后使用closePath()。 ;

如何使用jquery和html5制作饼图

以前我们利用jQuery制作过一些图表应用，使用起来都非常方便。今天再来看一款基于HTML5Canvas的饼状图图表应用，鼠标点击饼状图的某块区域时，即可高亮突出显示该区域。由于该饼状图是基于HTML5开发的，所以需要支持HTML5的浏览器才能够使用。

怎么使用canvas循环生成饼图

function drawCircle(canvasId, data_arr, color_arr, text_arr) {

    var pi2 = Math.PI*2;

    var canvas =document.getElementById(canvasId);    

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

    c.font ="12px Times New Roman";

    var startAgl = 0;

    var agl;

    for(var i=0; i data_arr.length; i++){ 

        //绘制饼图

        agl = data_arr[i] * pi2 + startAgl;

        c.fillStyle=color_arr[i];

        c.beginPath();

        c.moveTo(200,200);

        c.arc(200, 200, 150, startAgl, agl, false);

        c.lineTo(200,200);

        //c.stroke();

        c.fill();

        startAgl = agl;

        //绘制图例

        c.fillRect(360, 50+18*i,16,16);

        c.fillStyle="#000000";

        c.fillText(text_arr[i], 380, 62+18*i );    

    }

}

以上是绘制饼图的代码,效果如下：

至于

%%这个是jsp代码标记，不能直接调用js代码

如何使用HTML5 Canvas动态的绘制拓扑图

使用HTML5 Canvas动态的绘制拓扑图：

HTML5中引入新的元素canvas，其drawImage 方法允许在 canvas 中插入其他图像( img 和 canvas 元素) 。drawImage函数有三种函数原型：

语法：

drawImage(image, dx, dy)

drawImage(image, dx, dy, dw, dh)

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

*第一个参数image可以用HTMLImageElement，HTMLCanvasElement或者HTMLVideoElement作为参数。

*dx、dy是image在canvas中定位的坐标值；

*dw、dh是image在canvas中即将绘制区域（相对dx和dy坐标的偏移量）的宽度和高度值；

*sx、sy是image所要绘制的起始位置；

*sw、sh是image所要绘制区域（相对image的sx和sy坐标的偏移量）的宽度和高度值。

举例：

!DOCTYPE html

html

body

p要使用的图像：/p

img id="tulip" src="/i/eg_tulip.jpg" alt="The Tulip" /

p画布：/p

canvas id="myCanvas" width="500" height="300" style="border:1px solid #d3d3d3;background:#ffffff;"

Your browser does not support the HTML5 canvas tag.

/canvas

script

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

var img=document.getElementById("tulip");

ctx.drawImage(img,10,10);

/script

/body

/html

htmlcanvas饼状图代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于html绘制饼图、htmlcanvas饼状图代码的信息别忘了在本站进行查找喔。