如何用h5标签canvas画柱状图【立体】

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>canvas绘图演示</title>
<style type="text/css">
#canvas {
border: 1px solid #ccc;
}
</style>
</head>

<body>
//使用canvas标签作为画布，需要设置宽高
//⚠️注意：画布的宽高是**整数**(类型为**number**)
<canvas id="canvas" width="1000" height="1000">
你的浏览器还不支持canvas
</canvas>

</body>
<script type="text/javascript">
//画椭圆，作为圆柱的底部
function ParamEllipse(context, x, y, a, b) {
//max是等于1除以长轴值a和b中的较大者
//i每次循环增加1/max，表示度数的增加
//这样可以使得每次循环所绘制的路径（弧线）接近1像素
var step = (a > b) ? 1 / a : 1 / b;
context.beginPath();// 起始一条路径，或重置当前路径
context.moveTo(x + a, y); //从椭圆的左端点开始绘制
for (var i = 0; i < 2 * Math.PI; i += step) {
//参数方程为x = a * cos(i), y = b * sin(i)，
//参数为i，表示度数（弧度）
context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
}
context.closePath();// 创建从当前点回到起始点的路径
context.stroke();// 绘制已定义的路径
}

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

//阴影效果
context.shadowBlur = 10;
context.shadowColor = "rgba(0,0,0, 0.2)";
// 直接绘制填充的矩形
//使用fillRect方法
context.fillStyle = "rgba(237,142,18, 0.6)";
context.fillRect(310, 100, 200, 200);

context.fillStyle = "rgba(0,192,161, 0.6)";
context.fillRect(310, 300, 200, 200);

context.fillStyle = "rgba(0,183,233, 0.6)";
context.fillRect(310, 500, 200, 200);

context.fillStyle = "rgba(71,187,59, 0.6)";
context.fillRect(310, 700, 200, 200);

// 椭圆与方块的nice连接
// 顺序决定颜色的层次问题
context.lineWidth = 2;
context.strokeStyle = "rgba(237,142,18, 0.6)";
ParamEllipse(context, 410, 100, 100, 20); //椭圆
context.fillStyle="rgba(237,142,18, 1)";
context.fill();

context.lineWidth = 2;
context.strokeStyle = "rgba(237,142,18, 0.6)";
ParamEllipse(context, 410, 300, 100, 20); //椭圆
context.fillStyle="rgba(237,142,18, 1)";
context.fill();

context.lineWidth = 2;
context.strokeStyle = "rgba(0,192,161, 0.6)";
ParamEllipse(context, 410, 500, 100, 20); //椭圆
context.fillStyle="rgba(0,192,161, 1)";
context.fill();

context.lineWidth = 2;
context.strokeStyle = "rgba(0,183,233, 0.6)";
ParamEllipse(context, 410, 700, 100, 20); //椭圆
context.fillStyle="rgba(0,183,233, 1)";
context.fill();

context.lineWidth = 2;
context.strokeStyle = "rgba(132,238,121, 0.6)";
ParamEllipse(context, 410, 900, 100, 20); //椭圆
context.fillStyle="rgba(132,238,121, 1)";
context.fill();

</script>

</html>

如何用h5标签canvas画柱状图【立体】相关推荐

canvas 画柱状图
目录 canvas 画柱状图画一个简单的柱状图随机的柱状图 canvas 画柱状图画一个简单的柱状图注意点: 画柱状图矩形图的时候需要先填充后描边再使用 fillRect 等! ct ...
利用H5的canvas画一个时钟
学习了一周的canvas了,看了一些资料和视频,跟着视频也画了一些统计图和圆,矩形,线之类的,跟着视频也做了一个钟表,话不多说,直接上代码 canvas上套一个div盒子,作为钟表的背景 <di ...
canvas画柱状图和饼图
学习扔物线大大的教程 http://hencoder.com/ui-1-1/ https://github.com/hencoder/PracticeDraw1 饼图的指示文字还需要重新计算一下还有防 ...
H5组件Canvas画电子印章
效果图代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
新H5中用canvas画一个数字钟表
此文章是参考以往大牛代码,在大牛代码基础上加以更改而成. 本人暂时还是一名技术菜鸟,刚刚踏上web前端这条路才五个月,希望大牛们多多提携... 效果图如下: 话不多说,上代码: <body st ...
前端H5使用canvas画爱心以及笑脸
目录 canvas简介画爱心效果画笑脸效果结语 canvas简介 canvas是HTML5中推出的新功能,可以在页面上生成一个画布,使用js可以在画布上绘制一些图形. 画爱心画爱心我们需要 ...
h5跨域访问图片_h5标签canvas关于getImageData跨域的问题
h5标签canvas关于getImageData跨域的问题在学习h5的时候,canvas标签中getImageData()报错:security error! 具体代码如下(chrome浏览器): ...
H5 canvas 画圆画圆角
canvas是H5的一大重点我们来学一下如何用canvas画圆画圆 arc(x,y,r,起始弧度,结束弧度,顺逆时针) x,y就是这个圆的圆心坐标 r是圆的半径弧度单位用Math.PI 顺逆时针 ...
html画布直线代码,图文详解如何用html5 canvas画一条直线
是HTML5 中新增的元素,它可以结合JavaScript脚本绘制出各种各样的图形,对于canvas你了解多少?你会用canvas画直线吗?这篇文章就和大家讲讲如何用canvas画一条直线,有一定的参 ...

如何用h5标签canvas画柱状图【立体】

如何用h5标签canvas画柱状图【立体】相关推荐

最新文章

热门文章