canvas 简单入门
转自:xmt1139057136的专栏
新的 HTML5 canvas 是一个原生 HTML 绘图簿,用于 JavaScript 代码,不使用第三方工具。跨所有 web 浏览器的完整 HTML5 支持还没有完成,但在新兴的支持中,canvas 已经可以在几乎所有现代浏览器上良好运行了,但 Windows® Internet Explorer® 除外。幸运的是,一个解决方案已经出现,将 Internet Explorer 也包含进来。
本质上,canvas 元素是一个白板,直到您在它上面 “绘制” 一些可视内容。与拥有各种画笔的艺术家不同,您使用不同的方法在 canvas 上作画。您甚至可以在 canvas 上创建并操作动画,这不是使用画笔和油彩所能够实现的。
Canvas API(画布)用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitmap)。
使用前,首先需要新建一个canvas网页元素。
- <canvas id=“myCanvas” width=“400” height=“200”>
- 您的浏览器不支持canvas!
- </canvas>
- <!– 如果浏览器不支持这个API,则就会显示canvas标签中间的文字——“您的浏览器不支持canvas!”。 –>
<canvas id="myCanvas" width="400" height="200">您的浏览器不支持canvas!
</canvas>
<!-- 如果浏览器不支持这个API,则就会显示canvas标签中间的文字——“您的浏览器不支持canvas!”。 -->
每个canvas元素都有一个对应的context对象(上下文对象),Canvas API定义在这个context对象上面,所以需要获取这个对象,方法是使用getContext方法。
- var canvas = document.getElementById(‘myCanvas’);
- if (canvas.getContext) {
- var ctx = canvas.getContext(‘2d’);
- }
- // getContext方法指定参数2d,表示该canvas对象用于生成2D图案(即平面图案)。如果参数是3d,就表示用于生成3D图像(即立体图案),这部分实际上单独叫做WebGL API(看博主其他文章)。
var canvas = document.getElementById('myCanvas');
if (canvas.getContext) {var ctx = canvas.getContext('2d');
}
// getContext方法指定参数2d,表示该canvas对象用于生成2D图案(即平面图案)。如果参数是3d,就表示用于生成3D图像(即立体图案),这部分实际上单独叫做WebGL API(看博主其他文章)。
canvas画布提供了一个用来作图的平面空间,该空间的每个点都有自己的坐标,x表示横坐标,y表示竖坐标。原点(0, 0)位于图像左上角,x轴的正向是原点向右,y轴的正向是原点向下。
绘制路径
beginPath方法表示开始绘制路径,moveTo(x, y)方法设置线段的起点,lineTo(x, y)方法设置线段的终点,stroke方法用来给透明的线段着色。
- ctx.beginPath(); // 开始路径绘制
- ctx.moveTo(20, 20); // 设置路径起点,坐标为(20,20)
- ctx.lineTo(200, 20); // 绘制一条到(200,20)的直线
- ctx.lineWidth = 1.0; // 设置线宽
- ctx.strokeStyle = ”#CC0000”; // 设置线的颜色
- ctx.stroke(); // 进行线的着色,这时整条线才变得可见
- //moveto和lineto方法可以多次使用。最后,还可以使用closePath方法,自动绘制一条当前点到起点的直线,形成一个封闭图形,省却使用一次lineto方法。
ctx.beginPath(); // 开始路径绘制
ctx.moveTo(20, 20); // 设置路径起点,坐标为(20,20)
ctx.lineTo(200, 20); // 绘制一条到(200,20)的直线
ctx.lineWidth = 1.0; // 设置线宽
ctx.strokeStyle = "#CC0000"; // 设置线的颜色
ctx.stroke(); // 进行线的着色,这时整条线才变得可见
//moveto和lineto方法可以多次使用。最后,还可以使用closePath方法,自动绘制一条当前点到起点的直线,形成一个封闭图形,省却使用一次lineto方法。
绘制矩形
fillRect(x, y, width, height)方法用来绘制矩形,它的四个参数分别为矩形左上角顶点的x坐标、y坐标,以及矩形的宽和高。fillStyle属性用来设置矩形的填充色。
- ctx.fillStyle = ‘yellow’;
- ctx.fillRect(50, 50, 200, 100);
- //strokeRect方法与fillRect类似,用来绘制空心矩形。
- ctx.strokeRect(10,10,200,100);
- //clearRect方法用来清除某个矩形区域的内容。
- ctx.clearRect(100,50,50,50);
ctx.fillStyle = 'yellow';
ctx.fillRect(50, 50, 200, 100);
//strokeRect方法与fillRect类似,用来绘制空心矩形。
ctx.strokeRect(10,10,200,100);
//clearRect方法用来清除某个矩形区域的内容。
ctx.clearRect(100,50,50,50);
绘制文本
fillText(string, x, y) 用来绘制文本,它的三个参数分别为文本内容、起点的x坐标、y坐标。使用之前,需用font设置字体、大小、样式(写法类似与CSS的font属性)。与此类似的还有strokeText方法,用来添加空心字。
- // 设置字体
- ctx.font = ”Bold 20px Arial”;
- // 设置对齐方式
- ctx.textAlign = ”left”;
- // 设置填充颜色
- ctx.fillStyle = ”#008600”;
- // 设置字体内容,以及在画布上的位置
- ctx.fillText(”Hello!”, 10, 50);
- // 绘制空心字
- ctx.strokeText(”Hello!”, 10, 100);
- //fillText方法不支持文本断行,即所有文本出现在一行内。所以,如果要生成多行文本,只有调用多次fillText方法。
// 设置字体
ctx.font = "Bold 20px Arial";
// 设置对齐方式
ctx.textAlign = "left";
// 设置填充颜色
ctx.fillStyle = "#008600";
// 设置字体内容,以及在画布上的位置
ctx.fillText("Hello!", 10, 50);
// 绘制空心字
ctx.strokeText("Hello!", 10, 100);
//fillText方法不支持文本断行,即所有文本出现在一行内。所以,如果要生成多行文本,只有调用多次fillText方法。
绘制圆形和扇形
arc方法用来绘制扇形
- ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
- //arc方法的x和y参数是圆心坐标,radius是半径,startAngle和endAngle则是扇形的起始角度和终止角度(以弧度表示)//,anticlockwise表示做图时应该逆时针画(true)还是顺时针画(false)
- //绘制实心的圆形
- ctx.beginPath();
- ctx.arc(60, 60, 50, 0, Math.PI*2, true);
- ctx.fillStyle = ”#000000”;
- ctx.fill();
- //绘制空心圆形
- ctx.beginPath();
- ctx.arc(60, 60, 50, 0, Math.PI*2, true);
- ctx.lineWidth = 1.0;
- ctx.strokeStyle = ”#000”;
- ctx.stroke();
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
//arc方法的x和y参数是圆心坐标,radius是半径,startAngle和endAngle则是扇形的起始角度和终止角度(以弧度表示)//,anticlockwise表示做图时应该逆时针画(true)还是顺时针画(false)
//绘制实心的圆形
ctx.beginPath();
ctx.arc(60, 60, 50, 0, Math.PI*2, true);
ctx.fillStyle = "#000000";
ctx.fill();
//绘制空心圆形
ctx.beginPath();
ctx.arc(60, 60, 50, 0, Math.PI*2, true);
ctx.lineWidth = 1.0;
ctx.strokeStyle = "#000";
ctx.stroke();
设置渐变色
createLinearGradient方法用来设置渐变色。
- var myGradient = ctx.createLinearGradient(0, 0, 0, 160);
- myGradient.addColorStop(0, ”#BABABA”);
- myGradient.addColorStop(1, ”#636363”);
- //createLinearGradient方法的参数是(x1, y1, x2, y2),其中x1和y1是起点坐标,x2和y2是终点坐标。通过不同的坐标值,可以生成从上至下、从左到右的渐变等等
- ctx.fillStyle = myGradient;
- ctx.fillRect(10,10,200,100);
var myGradient = ctx.createLinearGradient(0, 0, 0, 160);
myGradient.addColorStop(0, "#BABABA");
myGradient.addColorStop(1, "#636363");
//createLinearGradient方法的参数是(x1, y1, x2, y2),其中x1和y1是起点坐标,x2和y2是终点坐标。通过不同的坐标值,可以生成从上至下、从左到右的渐变等等
ctx.fillStyle = myGradient;
ctx.fillRect(10,10,200,100);
设置阴影
一系列与阴影相关的方法,可以用来设置阴影。
- ctx.shadowOffsetX = 10; // 设置水平位移
- ctx.shadowOffsetY = 10; // 设置垂直位移
- ctx.shadowBlur = 5; // 设置模糊度
- ctx.shadowColor = ”rgba(0,0,0,0.5)”; // 设置阴影颜色
- ctx.fillStyle = ”#CC0000”;
- ctx.fillRect(10,10,200,100);
ctx.shadowOffsetX = 10; // 设置水平位移
ctx.shadowOffsetY = 10; // 设置垂直位移
ctx.shadowBlur = 5; // 设置模糊度
ctx.shadowColor = "rgba(0,0,0,0.5)"; // 设置阴影颜色
ctx.fillStyle = "#CC0000";
ctx.fillRect(10,10,200,100);
- //canvas允许将图像文件插入画布,做法是读取图片后,使用drawImage方法在画布内进行重绘。
- var img = new Image();
- img.src = ”image.png”;
- ctx.drawImage(img, 0, 0); // 设置对应的图像对象,以及它在画布上的位置
- //由于图像的载入需要时间,drawImage方法只能在图像完全载入后才能调用,因此上面的代码需要改写。
- var image = new Image();
- image.onload = function() {
- if (image.width != canvas.width)
- canvas.width = image.width;
- if (image.height != canvas.height)
- canvas.height = image.height;
- ctx.clearRect(0, 0, canvas.width, canvas.height);
- ctx.drawImage(image, 0, 0);
- }
- image.src = ”image.png”;
- //drawImage()方法接受三个参数,第一个参数是图像文件的DOM元素(即img标签),第二个和第三个参数是图像左上角在//Canvas元素中的坐标,上例中的(0, 0)就表示将图像左上角放置在Canvas元素的左上角。
- //getImageData方法可以用来读取Canvas的内容,返回一个对象,包含了每个像素的信息。
- var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
- //imageData对象有一个data属性,它的值是一个一维数组。该数组的值,依次是每个像素的红、绿、蓝、alpha通道值,因//此该数组的长度等于 图像的像素宽度 x 图像的像素高度 x 4,每个值的范围是0–255。这个数组不仅可读,而且可写,//因此通过操作这个数组的值,就可以达到操作图像的目的。修改这个数组以后,使用putImageData方法将数组内容重新绘//制在Canvas上。
- context.putImageData(imageData, 0, 0);
- //对图像数据做出修改以后,可以使用toDataURL方法,将Canvas数据重新转化成一般的图像文件形式。
- function convertCanvasToImage(canvas) {
- var image = new Image();
- image.src = canvas.toDataURL(”image/png”);
- return image;
- }
- //save方法用于保存上下文环境,restore方法用于恢复到上一次保存的上下文环境。
- ctx.save();
- ctx.shadowOffsetX = 10;
- ctx.shadowOffsetY = 10;
- ctx.shadowBlur = 5;
- ctx.shadowColor = ”rgba(0,0,0,0.5)”;
- ctx.fillStyle = ”#CC0000”;
- ctx.fillRect(10,10,150,100);
- ctx.restore();
- ctx.fillStyle = ”#000000”;
- ctx.fillRect(180,10,150,100);
- //先用save方法,保存了当前设置,然后绘制了一个有阴影的矩形。接着,使用restore方法,恢复了保存前的设置,绘制//了一个没有阴影的矩形
- //利用JavaScript,可以在canvas元素上很容易地产生动画效果
- var posX = 20,
- posY = 100;
- setInterval(function() {
- context.fillStyle = ”black”;
- context.fillRect(0,0,canvas.width, canvas.height);
- posX += 1;
- posY += 0.25;
- context.beginPath();
- context.fillStyle = ”white”;
- context.arc(posX, posY, 10, 0, Math.PI*2, true);
- context.closePath();
- context.fill();
- }, 30);
- //产生一个小圆点,每隔30毫秒就向右下方移动的效果。setInterval函数的一开始,之所以要将画布重新渲染黑色底色,//是为了抹去上一步的小圆点。
- //通过设置圆心坐标,可以产生各种运动轨迹。
- //先上升后下降。
- var vx = 10,
- vy = -10,
- gravity = 1;
- setInterval(function() {
- posX += vx;
- posY += vy;
- vy += gravity;
- // …
- });
- //x坐标始终增大,表示持续向右运动。y坐标先变小,然后在重力作用下,不断增大,表示先上升后下降。
- //小球不断反弹后,逐步趋于静止
- var vx = 10,
- vy = -10,
- gravity = 1;
- setInterval(function() {
- posX += vx;
- posY += vy;
- if (posY > canvas.height * 0.75) {
- vy *= -0.6;
- vx *= 0.75;
- posY = canvas.height * 0.75;
- }
- vy += gravity;
- // …
- });
- //一旦小球的y坐标处于屏幕下方75%的位置,向x轴移动的速度变为原来的75%,而向y轴反弹上一次反弹高度的40%。
- //通过getImageData方法和putImageData方法,可以处理每个像素,进而操作图像内容。
- //假定filter是一个处理像素的函数,那么整个对Canvas的处理流程,可以用下面的代码表示。
- if (canvas.width > 0 && canvas.height > 0) {
- var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
- filter(imageData);
- context.putImageData(imageData, 0, 0);
- }
- //以下是几种常见的处理方法。
- //灰度图(grayscale)就是取红、绿、蓝三个像素值的算术平均值,这实际上将图像转成了黑白形式。假定d[i]是像素数组中一个象素的红色值,则d[i+1]为绿色值,d[i+2]为蓝色值,d[i+3]就//是alpha通道值。转成灰度的算法,就是将红、绿、蓝三个值相加后除以3,再将结果写回数组。
- grayscale = function (pixels) {
- var d = pixels.data;
- for (var i = 0; i < d.length; i += 4) {
- var r = d[i];
- var g = d[i + 1];
- var b = d[i + 2];
- d[i] = d[i + 1] = d[i + 2] = (r+g+b)/3;
- }
- return pixels;
- };
- //复古效果(sepia)则是将红、绿、蓝三个像素,分别取这三个值的某种加权平均值,使得图像有一种古旧的效果。
- sepia = function (pixels) {
- var d = pixels.data;
- for (var i = 0; i < d.length; i += 4) {
- var r = d[i];
- var g = d[i + 1];
- var b = d[i + 2];
- d[i] = (r * 0.393)+(g * 0.769)+(b * 0.189); // red
- d[i + 1] = (r * 0.349)+(g * 0.686)+(b * 0.168); // green
- d[i + 2] = (r * 0.272)+(g * 0.534)+(b * 0.131); // blue
- }
- return pixels;
- };
- //红色蒙版指的是,让图像呈现一种偏红的效果。算法是将红色通道设为红、绿、蓝三个值的平均值,而将绿色通道和蓝色通道都设为0。
- red = function (pixels) {
- var d = pixels.data;
- for (var i = 0; i < d.length; i += 4) {
- var r = d[i];
- var g = d[i + 1];
- var b = d[i + 2];
- d[i] = (r+g+b)/3; // 红色通道取平均值
- d[i + 1] = d[i + 2] = 0; // 绿色通道和蓝色通道都设为0
- }
- return pixels;
- };
- //亮度效果(brightness)是指让图像变得更亮或更暗。算法将红色通道、绿色通道、蓝色通道,同时加上一个正值或负值。
- brightness = function (pixels, delta) {
- var d = pixels.data;
- for (var i = 0; i < d.length; i += 4) {
- d[i] += delta; // red
- d[i + 1] += delta; // green
- d[i + 2] += delta; // blue
- }
- return pixels;
- };
- //反转效果(invert)是指图片呈现一种色彩颠倒的效果。算法为红、绿、蓝通道都取各自的相反值(255-原值)。
- invert = function (pixels) {
- var d = pixels.data;
- for (var i = 0; i < d.length; i += 4) {
- d[i] = 255 - d[i];
- d[i+1] = 255 - d[i + 1];
- d[i+2] = 255 - d[i + 2];
- }
- return pixels;
- };
//canvas允许将图像文件插入画布,做法是读取图片后,使用drawImage方法在画布内进行重绘。
var img = new Image();
img.src = "image.png";
ctx.drawImage(img, 0, 0); // 设置对应的图像对象,以及它在画布上的位置
//由于图像的载入需要时间,drawImage方法只能在图像完全载入后才能调用,因此上面的代码需要改写。
var image = new Image();
image.onload = function() { if (image.width != canvas.width)canvas.width = image.width;if (image.height != canvas.height)canvas.height = image.height;ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.drawImage(image, 0, 0);
}
image.src = "image.png";
//drawImage()方法接受三个参数,第一个参数是图像文件的DOM元素(即img标签),第二个和第三个参数是图像左上角在//Canvas元素中的坐标,上例中的(0, 0)就表示将图像左上角放置在Canvas元素的左上角。//getImageData方法可以用来读取Canvas的内容,返回一个对象,包含了每个像素的信息。
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
//imageData对象有一个data属性,它的值是一个一维数组。该数组的值,依次是每个像素的红、绿、蓝、alpha通道值,因//此该数组的长度等于 图像的像素宽度 x 图像的像素高度 x 4,每个值的范围是0–255。这个数组不仅可读,而且可写,//因此通过操作这个数组的值,就可以达到操作图像的目的。修改这个数组以后,使用putImageData方法将数组内容重新绘//制在Canvas上。
context.putImageData(imageData, 0, 0);//对图像数据做出修改以后,可以使用toDataURL方法,将Canvas数据重新转化成一般的图像文件形式。
function convertCanvasToImage(canvas) {var image = new Image();image.src = canvas.toDataURL("image/png");return image;
}//save方法用于保存上下文环境,restore方法用于恢复到上一次保存的上下文环境。
ctx.save();
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 5;
ctx.shadowColor = "rgba(0,0,0,0.5)";
ctx.fillStyle = "#CC0000";
ctx.fillRect(10,10,150,100);
ctx.restore();
ctx.fillStyle = "#000000";
ctx.fillRect(180,10,150,100);
//先用save方法,保存了当前设置,然后绘制了一个有阴影的矩形。接着,使用restore方法,恢复了保存前的设置,绘制//了一个没有阴影的矩形//利用JavaScript,可以在canvas元素上很容易地产生动画效果
var posX = 20,posY = 100;
setInterval(function() {context.fillStyle = "black";context.fillRect(0,0,canvas.width, canvas.height);posX += 1;posY += 0.25;context.beginPath();context.fillStyle = "white";context.arc(posX, posY, 10, 0, Math.PI*2, true); context.closePath();context.fill();
}, 30);
//产生一个小圆点,每隔30毫秒就向右下方移动的效果。setInterval函数的一开始,之所以要将画布重新渲染黑色底色,//是为了抹去上一步的小圆点。
//通过设置圆心坐标,可以产生各种运动轨迹。
//先上升后下降。
var vx = 10,vy = -10,gravity = 1;
setInterval(function() {posX += vx;posY += vy;vy += gravity;// ...
});
//x坐标始终增大,表示持续向右运动。y坐标先变小,然后在重力作用下,不断增大,表示先上升后下降。
//小球不断反弹后,逐步趋于静止
var vx = 10,vy = -10,gravity = 1;
setInterval(function() {posX += vx;posY += vy;if (posY > canvas.height * 0.75) {vy *= -0.6;vx *= 0.75;posY = canvas.height * 0.75;}vy += gravity;// ...
});
//一旦小球的y坐标处于屏幕下方75%的位置,向x轴移动的速度变为原来的75%,而向y轴反弹上一次反弹高度的40%。//通过getImageData方法和putImageData方法,可以处理每个像素,进而操作图像内容。
//假定filter是一个处理像素的函数,那么整个对Canvas的处理流程,可以用下面的代码表示。
if (canvas.width > 0 && canvas.height > 0) {var imageData = context.getImageData(0, 0, canvas.width, canvas.height);filter(imageData);context.putImageData(imageData, 0, 0);
}//以下是几种常见的处理方法。
//灰度图(grayscale)就是取红、绿、蓝三个像素值的算术平均值,这实际上将图像转成了黑白形式。假定d[i]是像素数组中一个象素的红色值,则d[i+1]为绿色值,d[i+2]为蓝色值,d[i+3]就//是alpha通道值。转成灰度的算法,就是将红、绿、蓝三个值相加后除以3,再将结果写回数组。
grayscale = function (pixels) {var d = pixels.data;for (var i = 0; i < d.length; i += 4) {var r = d[i];var g = d[i + 1];var b = d[i + 2];d[i] = d[i + 1] = d[i + 2] = (r+g+b)/3;}return pixels;
};//复古效果(sepia)则是将红、绿、蓝三个像素,分别取这三个值的某种加权平均值,使得图像有一种古旧的效果。
sepia = function (pixels) {var d = pixels.data;for (var i = 0; i < d.length; i += 4) {var r = d[i];var g = d[i + 1];var b = d[i + 2];d[i] = (r * 0.393)+(g * 0.769)+(b * 0.189); // redd[i + 1] = (r * 0.349)+(g * 0.686)+(b * 0.168); // greend[i + 2] = (r * 0.272)+(g * 0.534)+(b * 0.131); // blue}return pixels;
};//红色蒙版指的是,让图像呈现一种偏红的效果。算法是将红色通道设为红、绿、蓝三个值的平均值,而将绿色通道和蓝色通道都设为0。
red = function (pixels) { var d = pixels.data;for (var i = 0; i < d.length; i += 4) {var r = d[i];var g = d[i + 1];var b = d[i + 2];d[i] = (r+g+b)/3; // 红色通道取平均值d[i + 1] = d[i + 2] = 0; // 绿色通道和蓝色通道都设为0}return pixels;
};//亮度效果(brightness)是指让图像变得更亮或更暗。算法将红色通道、绿色通道、蓝色通道,同时加上一个正值或负值。
brightness = function (pixels, delta) {var d = pixels.data;for (var i = 0; i < d.length; i += 4) {d[i] += delta; // redd[i + 1] += delta; // greend[i + 2] += delta; // blue }return pixels;
};//反转效果(invert)是指图片呈现一种色彩颠倒的效果。算法为红、绿、蓝通道都取各自的相反值(255-原值)。
invert = function (pixels) {var d = pixels.data;for (var i = 0; i < d.length; i += 4) {d[i] = 255 - d[i];d[i+1] = 255 - d[i + 1];d[i+2] = 255 - d[i + 2];}return pixels;
};
如有不懂,请加qq群:135430763共同学习!
canvas 简单入门相关推荐
- html:canvas画布绘图简单入门-绘制时钟-3
canvas示例系列: html:canvas画布绘图简单入门-1 html:canvas画布绘图简单入门-2 html:canvas画布绘图简单入门-绘制时钟-3 html:canvas画布绘图简单 ...
- html:canvas画布绘图简单入门-画板-5
canvas示例系列: html:canvas画布绘图简单入门-1 html:canvas画布绘图简单入门-2 html:canvas画布绘图简单入门-绘制时钟-3 html:canvas画布绘图简单 ...
- EChart.js 简单入门
EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart 这个是Visual Studio里的自带控件,使用比 ...
- html5动态连线,canvas简单连线动画的实现代码
前言:canvas动画入门系列之简单连线动画.虽然简单,但连线动画应用场景还挺多,因此做了个小demo,一通百通. step1:绘制点 首先创建个标签 设置几个点的坐标 const points = ...
- Canvas 从入门到劝朋友放弃(图解版)
本文简介 点赞 + 关注 + 收藏 = 学会了 在前端领域,如果只是懂 Vue 或者 React ,未来在职场的竞争力可能会比较弱. 根据我多年在家待业经验来看,前端未来在 数据可视化 和 AI 这两 ...
- BizTalk 2006 简单入门示例程序(附源项目文件下载)
BizTalk 2006 简单入门示例程序(附源项目文件下载) 为初学BizTalk Server 2006的开发人员,提供一个简单入门的示例程序,包括一个Receive Port.Send Port ...
- python如何读取mat文件可视化_python Matplotlib数据可视化(1):简单入门
1 matplot入门指南 matplotlib是Python科学计算中使用最多的一个可视化库,功能丰富,提供了非常多的可视化方案,基本能够满足各种场景下的数据可视化需求.但功能丰富从另一方面来说也意 ...
- ARM NEON 编程简单入门1
原文:http://blog.csdn.net/silentob/article/details/72954618 ARM NEON 编程简单入门1 NEON简介 NEON是适用于ARM Corte ...
- Python 简单入门指北(二)
Python 简单入门指北(二) 2 函数 2.1 函数是一等公民 一等公民指的是 Python 的函数能够动态创建,能赋值给别的变量,能作为参传给函数,也能作为函数的返回值.总而言之,函数和普通变量 ...
最新文章
- python采用函数式编程模式吗_Python函数与函数式编程
- WP7 应用数据存储Tombstoning(墓碑化)篇
- 命令获取计算机信息,教你怎么在windows上用命令查看系统信息
- when save is performed, registered callback will be called one by one
- 计算机应用124单元测试卷,《计算机应用基础》第一部分单元测试试卷
- 飞鸽传书:谈谈RenderControl手动调用
- java读取文件buffered_关于Java中使用BufferedReader读取文件的疑惑
- MySQL--pymysql模块
- WCF Endpoint分类
- 【python】Tkinter可视化窗口(三)
- 【转】Java杂谈(九)--Struts
- 【Java】 大话数据结构(6) 栈的顺序与链式存储
- WareZ入门指南--TLF元老thunderlight
- 2013年最新热门软件分享第一季
- 判断一个数是否为素数(质数) c语言
- python 假设检验
- 华为HCNA之IPv6实验
- 硬件软件接口 (RISC-V) Chapter 2
- 数列极限四则运算误区
- Codeforces 1250 G Discarding Game —— 贪心
热门文章
- 快手创作者版App正式上线
- 加盟故事里的炸鸡的经历
- win7 家庭组连接 使用用户账号和密码连接到其他计算机,Win7 家庭组 共享 要密码用户名 及无权访问 解决方案...
- 计算机更改家庭组密码,Windows7中为家庭组设置密码后如何修改
- 新标准下,涉密信息系统集成资质都有哪些变化?
- 水果店如何选址,开水果店如何选址
- windows之远程连接路由器下的电脑
- 黑鲨4黑鲨4SPro全系列降级救砖9008刷机救砖 修复基带解锁BL获取magisk权限
- RPA之家实战 百度OCR识别发票
- C++:了解SGI-STL空间配置器