扫描二维码添加客服微信
扫描二维码关注
canvas 画图-利用canvas绘制波形图
怎样使用canvas绘制一个矩形
1、首先需要新建文件并创建画布。
2、接下来开始定义函数获取画布。
3、然后可以获取上下文。、
4、接着需要设置填充矩形的颜色。
5、接下来开始设置边框颜色和边框宽度。
6、最后开始绘制填充矩形和边框矩形。
7、最后输出完成图,可以看到绘制一个矩形。
android：如何用canvas在自定义view里画图
做安卓开发的话,不会自定义view是不行的,自定定义各种控件以满足开发需求,在开发中是很重要的,自定义view通过继承view,通过重写ondraw方法实现重绘自己所需要的控件样式。
在ondraw方法中,通过canvas来绘制想要的样式,首先需要定义好画笔,以及画笔的各种属性,比如需要的时候要
抗锯齿
等等。都准备好了就可以用canvas来实现绘图了,当然api提供的api肯定是不够用的,需要多姿多彩的样式很多时候需要借助准备好的一些图片,通过canvas绘制bitmap来实现把准备好的图片绘制上去。绘制好了当然还是不够的,控件都是需要和用户交互的,所以很多时候样式是会发生改变的,所以要在其中定义相关方法暴露出来,方法中处理用户操作或其他的结果改变样式的重绘,绘制好了调用更新(
invalidate
())方法,实现样式的改变。做好一个控件还需要优化性能等等,都需要一步一慢慢实现。
利用canvas绘制波形图
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
body {
margin: 0 auto;
text-align: center;
}
canvas {
background: #eee;
}
</style>
<script>
var x = 0; // canvas画布原点x
var y = 0; // canvas画布原点y
var x_base = x; // 我们要画的波形图的最后一个点的x坐标
var y_base = 250; // 我们要画的波形图的最后一个点的y坐标
var arrPoint = []; // 用于保存已经波形图的轨迹点
var index = 0; // 这个我是用来打日志用的..下面为了看清除了多少次canvas画布
var step = 10; // x轴每次走的步长
var width = 1000; // 这个是画布宽度
var height = 960; // 这个是画图高度
(function () {
// 首先让我们的函数周期调用
var itv = setInterval(function () {
// 获取canvas对象和context,并进行一系列初始化
var canvas = ("canvas");
var context = ("2d");
= "rgb(255,0,0)";
= "rgb(255,0,0)";
// 画图之前首先清理一下我们的画布,四个参数.
// 1.坐标原点x
// 2.坐标原点y
// 3.要清理的宽度(这里宽度用的x_base是因为canvas画布的原点不断向左移动,变相的等于画布不断变宽
// 之所以减一个step是需要看下文,因为在下文中,x_base每一次都会增加一个step,而我们在清理画布的时候,
// 我们的画布原点还没有被移动,相当于我们在清除画布时,我们的画布宽度还没有增加,所以要减一个step,当然不减也可以,没事儿)
// 4.画布高度
(0, 0, x_base - step, height);
if (x_base > width) {
("clear" + index);
index++;
// 画布原点x轴向左移动一个step的位置
(step * -1, 0);
}
// 向数组中添加数据,将我们每一次目标到达的终点坐标添加到数组中.这里我设置的条件是,保证数组大小不会超过我的画布宽度除以step个
// 目的是针对画布定的,就是每一次我只画画布这么大小的图
var obj = {};
obj.x = x_base;
obj.y = y_base;
if ( > (width / step)) {
(0, 1);
(arrPoint);
}
(obj);
// 开始画了,在画之前先将所有的图形都画出来
();
for (var i = 0; i < ; i++) {
(arrPoint[i].x, arrPoint[i].y);
}
// 再一次性将所有图形呈现在html上
();
();
// OK,这时候已经花完了,现在要算一算我们的下一个目标点的坐标了,算完了以后,保存在一个全局变量中
// 等待下次再执行画图函数时,将变量添加到数组中,让canvas画图使用
x_base += step;
y_base = 250 + () * 20;
}, 100)
})()
</script>
</head>
<body>
<canvas id="canvas" width="1000" height="960">
你这不行啊..不支持canvas
</canvas>
</body>
</html>
-
果盘绘画图片大全简单创作方法快速制作技巧2024-01-02 16:57:54
-
小年插画图片创作方法快速制作技巧2024-01-02 16:57:20
-
小年绘画作品制作技巧2024-01-02 16:55:45
-
小年插画图片创作方法快速制作技巧
2024-01-02 16:55:02
-
立春插画图片如何制作2024-01-02 16:54:19
-
立春插画图片创作方法快速制作技巧2024-01-02 16:53:32
