一.基本内容
   1.简单来说,HTML5提供的新元素<canvas>
   2.Canvas在HTML页面提供画布的功能,在画布中绘制各种图形
   3.Canvas绘制的图形与HTML页面无关,无法通过DOM获取绘制的图形,无法为绘制的图形绑定DOM事件
   4.只能使用Canvas提供的API
   5.Canvas的用途 在HTML页面中绘制图表(例如柱状图、饼状图等);网页游戏
 
二、如何使用Canvas
   1.在HTML页面中定义<canvas>元素
   2.在JavaScript代码中
      *获取<canvas>元素
      *创建画布对象 如text('2d')方法
      *使用Canvas提供的API

三、绘制图形
  1.绘制矩形
    *fillRect(x,y,width,height) - 实心矩形
       * x和y - 矩形的左上角坐标
       * width和height 矩形的宽度和高度
    *strokeRect(x,y,width,height) - 空心矩形
    *clearRect(x,y,width,height)
       *清除指定区域的矩形

  示例:

 <canvas id="canvas" width="500px" height="500px"></canvas>
<script>
//绘制矩形
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d"); // Canvas绘制图形的默认颜色 - 黑色 // 1. 绘制实心矩形
context.fillRect(10,10,100,100);
// 2. 绘制空心矩形 - 默认边框宽度为1
context.strokeRect(120,10,100,100);
// 3. 清除指定区域的矩形
context.fillRect(240,10,100,100);
context.clearRect(250,20,80,80); context.strokeRect(360,10,100,100);
//context.clearRect(359,9,102,102)
</script>

  2.设置颜色
      *fillStyle - 设置填充颜色
      *strokeStyle - 设置描边颜色
      *globalAlphp - 设置透明度(0-1)

  示例:

     <script>
// 当前绘制的矩形是什么颜色?green
context.fillStyle = "pink";
context.fillRect(120,10,100,100);
// 设置描边颜色
context.strokeStyle = "blue";
context.strokeRect(230,10,100,100);
// 设置透明度
context.fillStyle = "red";
context.globalAlpha = 0.5;//透明度设置
context.fillRect(340,10,100,100);
</script>

  3.设置渐变
      *线性渐变 - createLinearGradient(x1,y1,x2,y2)
         * 具有基准线 - 起点(x1,y1)和终点(x2,y2)
      *扇形(射线)渐变 - createRadialGradient(x1,y1,r1,x2,y2,r2)
         * 具有柱形(锥形) - 两个圆的面积
         * 参数
            * x1和y1 - 第一个圆的圆心坐标值
            * r1 - 第一个圆的半径
            * x2和y2 - 第二个圆的圆心坐标值
            * r2 - 第二个圆的半径

  示例:

   <script>
//线性渐变绘制
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
/*
* 1. 设置线型渐变
* createLinearGradient(x1,y1,x2,y2)
* * x1和y1 - 基准线的起点坐标值
* * x2和y2 - 基准线的终点坐标值
* * 该方法返回渐变对象
*/
var grd = context.createLinearGradient(0,0,canvas.width,canvas.height);
/*
* 2. 通过渐变对象,设置渐变颜色
* addColorStop(postion,color)方法
* * postion - 设置渐变颜色的位置
* * 该值的范围为 0-1
* * color - 设置渐变的颜色
*/
grd.addColorStop(0,"red");
grd.addColorStop(0.5,"yellow");
grd.addColorStop(0.75,"green");
grd.addColorStop(1,"blue");
// 3. 设置填充颜色 - 渐变对象
context.fillStyle = grd;
// 4. 绘制矩形
context.fillRect(0,0,canvas.width,canvas.height);
</script>
 <!--
扇形渐变
-->
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
/*
* 1. 设置扇形渐变
* createRadialGradient(x1,y1,r1,x2,y2,r2)
* * x1和y1 - 第一个基准圆的圆心坐标值
* * r1 - 第一个基准圆的半径
* * x2和y2 - 第二个基准圆的圆心坐标值
* * r2 - 第二个基准圆的半径
* * 该方法返回渐变对象
*/
var grd = context.createRadialGradient(canvas.width/2,canvas.height/2,10,canvas.width/2,canvas.height/2,200);
// 2. 设置渐变颜色
grd.addColorStop(0,"red");
grd.addColorStop(0.8,"yellow");
grd.addColorStop(1,"blue");
// 3. 设置填充颜色为渐变
context.fillStyle = grd;
// 4. 绘制矩形
context.fillRect(0,0,canvas.width,canvas.height);
</script>

  4.绘制文字 

    * 方法
        * fillText(text,x,y) - 实心文字
          * text - 绘制的文字内容
            * x和y - 绘制的坐标值
        * strokeText(text,x,y) - 空心文字
     * 属性
       * font - 类似于CSS中的font属性
       * textAlign - 设置文字的水平方向对齐
       * left - 左对齐
       * center - 水平居中
       * right - 右对齐
    * textBaseline - 设置文字的垂直方向对齐
       * top - 顶部对齐
       * middle - (垂直)居中对齐
       * bottom - 底部对齐
       * hanging - 悬挂基线
       * alphabetic - 字母基线
       * 注意
       * 无论是水平方向还是垂直方向对齐,基准线对齐,并不是文字对齐
       * 无论是水平方向还是垂直方向对齐,并不是必要的属性(不使用也是可以的)

  示例:

 <script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d"); // 绘制文字的基准线
context.beginPath();
context.moveTo(100,0);
context.lineTo(100,200);
context.stroke(); // 1. 设置文字的相关信息
context.font = "bold 48px 宋体"; context.fillText("你好",300,200); context.textAlign = "left";
// 2. 绘制文字
context.fillText("达内",100,50); context.textAlign = "center";
context.fillText("达内",100,100); context.textAlign = "right";
context.fillText("达内",100,150); // 绘制基准线
context.beginPath();
context.moveTo(0,300);
context.lineTo(500,300);
context.stroke(); // 绘制空心文字
context.textBaseline= "top";
context.strokeText("达内",100,300);
</script>

  5.绘制阴影
     * 阴影效果
     * shadowColor - 设置阴影颜色
     * shadowOffsetX - 设置水平方向阴影
     * shadowOffsetY - 设置垂直方向阴影
     * shadowBlur - 设置阴影的模糊程度

  示例:

   <script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d"); // 设置阴影效果
context.shadowColor = "red";
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur = 10; // 绘制文字
context.font = "bold 48px 微软雅黑";
context.fillText("达内",200,200); context.fillRect(10,10,100,100);
context.strokeRect(120,10,100,100);
</script>

  6.创建路径
     * (标识)方法
       * beginPath() - 表示开始创建路径
       * closePath() - 表示结束创建路径
     * 设置方法
       * rect(x,y,width,height) - 设置矩形形状
          * x和y - 设置矩形的左上角坐标值
          * width和height - 设置矩形的宽度和高度
       * arc(x,y,radius,startAngle,endAngle,direction) - 设置圆形形状
          * x和y - 设置圆形的圆心坐标值
          * radius - 设置圆形的半径
          * startAngle和endAngle - 设置圆形的起始位置
          * direction - 按照顺时针或逆时针绘制
       * 绘制方法
          * stroke() - 绘制轮廓
          * fill() - 绘制填充

  示例:

   <script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d"); // 1. 调用beginPath()方法(必要),表示开始创建路径
context.beginPath();
// 2. 设置形状 - 矩形
context.rect(10,10,100,100);
// 3. 调用closePath()方法(可写可不写)
context.closePath();
// 4. 绘制
context.fill(); // 利用创建路径绘制空心矩形
// 问题:是否需要再次调用beginPath()?编写
context.beginPath();//不写,上一个图形变虚
context.rect(10,120,100,100);
context.stroke(); // 使用创建路径绘制实心圆形
context.beginPath();
/*
* arc(x,y,radius,startAngle,endAngle,direction);
* * x和y1 - 设置圆形的圆心坐标值
* * radius - 设置圆形的半径
* * startAngle和endAngle
* * direction - 是顺时针还是逆时针
* * Boolean值,默认值为false,表示顺时针
*/
context.arc(170,60,50,0,Math.PI*2);
context.fill(); </script>

  7.绘制线条
     * lineWidth - 设置线条的宽度
        * 默认值为1(px)
       * lineCap - 设置线条端点的形状
        * butt - 默认值,平直
        * round - 圆角
        * square - 正方向
       * lineJoin - 设置两条线焦点的形状
        * miter - 默认值,尖角
        * round - 圆角
        * bevel - 斜角
       * miterLimit - 配合lineJoin使用
        * lineJoin设置为miter,该属性值设置尖角的延伸范围

  示例:

  

     <script>
//绘制线条
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d"); // 1. 表示开始创建路径
context.beginPath();
// 2. 设置直线(折线)的起点坐标值
context.moveTo(10,10);
// 3. 设置直线(折线)的终点(折点)坐标值
context.lineTo(100,10);
context.lineTo(100,100);
context.lineTo(10,100);
context.lineTo(10,10);
// 4. 绘制 - stroke()
context.stroke(); context.beginPath();
context.moveTo(200,100);
context.lineTo(400,100);
context.lineTo(400,400);
context.lineTo(200,400);
context.lineTo(300,300);
context.lineTo(200,100);
context.stroke(); //设置线条属性
// 设置线条
context.lineWidth = 10;
context.lineCap = "round";//设置端点处
context.lineJoin = "round";//设置相交处
context.miterLimit = 15; // 绘制一条折线
context.beginPath();
context.moveTo(10,10);
context.lineTo(300,300);
context.lineTo(100,50);
context.stroke();
// 绘制空心矩形
context.strokeRect(350,200,100,100);
</script>

四、Canvas处理图片
   1.绘制图片
     * drawImage(img,x,y) - 按照图片原大小加载
        * img - 当前加载(绘制)的图片
        * x和y - 绘制图片的坐标值(左上角)
       * drawImage(img,x,y,width,height) - 按照指定大小加载图片
        * img - 当前加载(绘制)的图片
        * x和y - 绘制图片的坐标值(左上角)
        * width和height - 设置绘制图片显示的宽度和高度
       * 注意
        * 必须保证图片加载完毕(onload事件)后,再绘制图片

  示例:

 <canvas id="canvas" width="900px" height="600px" style="background:pink"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d"); // 1. 加载一张图片
var myimg = new Image();
myimg.src = "Tulips.jpg";
/*
* 2. 绘制加载的图片
* 问题 - 图片并没有出现Canvas画布中
* * 原因
* * HTML页面加载<canvas>元素 - 画布
* * HTML页面加载图片
* * 使用drawImage()绘制图片
* * 加载<canvas>与图片、drawImage()之间没有必然联系
* * 要求
* * 必须先加载<canvas>元素,再加载图片
* * (出问题)必须先加载完毕图片,再执行绘制图片
* * 解决
* * 图片的onload事件 - 保证图片加载完毕
*/
myimg.onload = function(){
context.drawImage(myimg,10,10,512,384);
}
</script>

  2.平铺图片
     * createPattern(img,type)
        * img - 平铺的图片
        * type - 平铺的方式
      * repeat - 平铺
       * no-repeat - 不平铺
       * repeat-x - 水平方向平铺
       * repeat-y - 垂直方向平铺

  示例:

   <canvas id="canvas" width="900px" height="600px"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d"); // 1. 加载图片
var myimg = new Image();
myimg.src = "house.jpg";
myimg.onload = function(){
// 2. 设置平铺
var ptn = context.createPattern(myimg,"repeat");
// 3. 设置颜色为图片平铺
context.fillStyle = ptn;
// 4. 绘制矩形
context.fillRect(0,0,canvas.width,canvas.height);
}
</script>

  3.切割图片
      * clip() - 切割(按照创建路径使用)

  示例:

   <canvas id="canvas" width="512px" height="500px"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
// 绘制图片
var myimg = new Image();
myimg.src = "Tulips.jpg";
myimg.onload = function(){
context.drawImage(myimg,0,0,512,384);
}
// 切割图片
context.beginPath();
context.arc(240,100,80,0,Math.PI*2);
context.clip();
</script>

五、Canvas画布方法
   1. scale(x,y) - 缩放(缩小与放大)
      * x - 表示水平方向的缩放
      * y - 表示垂直方向的缩放
      * 参数取值
        * 如果为1的话,表示不缩放(原大小)
        * 如果小于1的话,表示缩小
        * 如果大于1的话,表示放大
   2. translate(x,y) - 重新定位(x,y)
       * x,y - 新的坐标值
       * 任意 - x,y是相对于上次定位坐标值
   3. rotate(旋转角度) - 旋转画布
       * 公式为 degrees * Math.PI / 180 ;

  示例:

   <canvas id="canvas" width="500px" height="500px"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d"); // 1. 重新定位
context.translate(200,100);
// 2. 缩放 0.5
context.scale(0.5,0.5);
// 3. 旋转
context.rotate(Math.PI/10); // 绘制实心矩形
context.fillStyle = "pink";
context.fillRect(0,0,100,50);
</script>

六、一些练习的小例子

  1. rotato螺旋图

    <canvas id="canvas" width="300px" height="300px" style="border:solid 1px black"></canvas>
<input id="start" type="button" value="开始">
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d"); var btn = document.getElementById("start");
btn.onclick = function(){
// 完成螺旋图
context.translate(150,50);
context.scale(0.95,0.95); context.fillStyle = "blue";
context.globalAlpha = 0.5;
context.fillRect(0,0,100,50); for(var i=0;i<50;i++){
// 相对上次定位坐标值
context.translate(20,20);
context.scale(0.95,0.95);
context.rotate(Math.PI/15); context.fillRect(0,0,100,50);
}
}
</script>

  2.小球随鼠标移动

    这个示例需要注意的只有两点 1.获取鼠标的移动的坐标 2.圆形的重绘及画布清除问题

  <body>
<canvas id="canvas" width="900px" height="500px" style="border:1px solid #000"></canvas>
</body>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d"); context.beginPath();
context.fillStyle = "#f50000";
context.arc(100,100,30,0,Math.PI*2);
context.fill(); canvas.onmousemove = function(event){
var x = event.offsetX;
var y = event.offsetY;
console.log(x+" "+y); //重绘
context.clearRect(0,0,900,500);//清除画布
context.beginPath();
context.arc(x,y,30,0,Math.PI*2);
context.fill();
}
</script>

  3.多球掉落

    我写着的这个例子会比上边的稍微难一点,我的思路是这样的:

  1.先建立一个构造器,保存小球的 x,y坐标 r半径 颜色 透明度等信息

    //小球构造函数
function sphere(x,y,r,color,alpha){
this.x = x;//小球x坐标
this.y = y;//小球y坐标
this.r = r;//小球r半径
this.color = color;//小球颜色
this.alpha = alpha;//透明度
}

  2.设置一些基本的数据参数 小球用一个数组存储

    //canvas画布的宽度和高度
var WIDTH = canvas.width;
var HEIGHT = canvas.height;
//小球出现的频率
var SPHERETIME = 500;
//整体重绘时间间隔
var REDAWTIME = 10; //初始化x,y坐标 color颜色
var x=50,y=50,color="#000",alpha="1";
//小球存储数组
var spheres = [];

  3.用一个定时器来生成小球并存放到数组中

    setInterval(function(){
//随机半径
var r = parseInt(Math.random()*31+10);//10~30 半径
//随机x坐标
x = parseInt(Math.random()*WIDTH);
x>WIDTH-r&&(x = WIDTH-r);//判断球右侧超出
x<r&&(x=r);//判断球左侧超出
//随机颜色
color = "rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")";
//透明度随机
alpha = Math.random().toFixed(1);
spheres.push(new sphere(x,-r,r,color,alpha)); },SPHERETIME);

  4.最后一步吧数组中的小球绘制到Canvas画布中

    //整体重绘
function drawCircles(){
//关于背景这里有两个方法 1,在画布中设置一个图片背景每次都重置;2,在vanvas的标签中设置背景图片,用clearRect的方法清空画布 都可以达到效果,在这里第二种更加的方便
//图片重绘
context.drawImage(myimg,0,0);
//context.clearRect(0,0,900,500);
for (var i=0; i<spheres.length; i++)
{
if (spheres[i].y>HEIGHT)
{
//删除当前超出画布的小球对象
spheres.splice(i,1);
i--;//每当删除一个数组元素,就要重新判断当前元素
continue;
}
// 绘制圆形
context.beginPath();
context.fillStyle=spheres[i].color;
//透明度设置
context.globalAlpha = spheres[i].alpha;//这里设置透明度会有一些画面延迟问题,使用rgba设置透明度就没有问题 context.arc(spheres[i].x,spheres[i].y+=1,spheres[i].r,0,Math.PI*2);//绘制圆型
context.fill();//实心绘制
}
setTimeout(drawCircles,REDAWTIME);//小球整体重绘间隔我觉得用setTimeout比较好
}

  6.写完后的一些想法,有提议把小球的透明度的效果改为 随着小球的掉落不透明度逐渐降低 让小球调到底部透明消失;

   还有一个重要的问题(很高心您看到了这里,如果您知道下面问题的答案或更好的方法,请留言,感谢不尽):在设置小球不透明度的时候(context.globalAlpha = spheres[i].alpha;)由于频繁调用这个函数,在画面绘制的时候会造成延时,小球闪烁,画面滞带的问题;个人理解:globalAlpha这个函数可以当成全局使用,就是在大批量绘制同一透明度图像时比较有用,但是在这种频繁调用的时候就会影响性能,我找的解决方法就是给小球的颜色格式设置为rgba这样可以解决。如果有大神看到了这里,希望您能指点一下canvas绘图中的函数的性能问题,或者使用canvas做游戏绘制图象时,怎么解决外部图形频繁加载的问题,比如将图像直接写入内存并在内存中操作等的方法提要图像效率的方案。

  7.附上小球掉落的所有代码

 <!DOCTYPE html>
<html>
<head>
<title>小球掉落</title>
<meta charset="utf-8">
</head> <body>
<canvas id="canvas" width="900px" height="500px" style="background-color:#fff;border:1px solid #000;background-image:url('bg.jpg')"></canvas>
</body>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
// 绘制图片 - 当前画布的背景图片
var myimg = new Image();
myimg.src = "bg.jpg";
//canvas画布的宽度和高度
var WIDTH = canvas.width;
var HEIGHT = canvas.height;
//小球出现的频率
var SPHERETIME = 500;
//整体重绘时间间隔
var REDAWTIME = 10; //初始化x,y坐标 color颜色
var x=50,y=50,color="#000",alpha="1";
//小球存储数组
var spheres = [];
//小球构造函数
function sphere(x,y,r,color,alpha){
this.x = x;//小球x坐标
this.y = y;//小球y坐标
this.r = r;//小球r半径
this.color = color;//小球颜色
this.alpha = alpha;//透明度
} //整体重绘
function drawCircles(){
//console.log(spheres.length);
//图片重绘
context.drawImage(myimg,0,0);
//context.clearRect(0,0,900,500);
for (var i=0; i<spheres.length; i++)
{
if (spheres[i].y>HEIGHT)
{
//删除当前超出画布的小球对象
spheres.splice(i,1);
i--;
continue;
}
// 绘制圆形
context.beginPath();
context.fillStyle=spheres[i].color;
//透明度设置
context.globalAlpha = spheres[i].alpha;
//context.globalAlpha > 0.5 ? (context.globalAlpha = 0.2) : (context.globalAlpha = 0.8); context.arc(spheres[i].x,spheres[i].y+=1,spheres[i].r,0,Math.PI*2);//绘制圆型
context.fill();//实心绘制
}
setTimeout(drawCircles,REDAWTIME);//
} //小球随机出现
setInterval(function(){
//随机半径
var r = parseInt(Math.random()*31+10);//10~30 半径
//随机x坐标
x = parseInt(Math.random()*WIDTH);
x>WIDTH-r&&(x = WIDTH-r);//判断球右侧超出
x<r&&(x=r);//判断球左侧超出
//随机颜色
color = "rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")";
//透明度随机
alpha = Math.random().toFixed(1);
spheres.push(new sphere(x,-r,r,color,alpha)); },SPHERETIME); drawCircles();//调用整体绘制函数 </script>
</html>

Canvas 基本绘图方法总结的更多相关文章

  1. html --- canvas --- javascript --- 绘图方法

    Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像. 如有疑问请访问链接:http://javascript.ruanyifeng.com/htmlapi/canvas.html < ...

  2. Canvas绘图方法和图像处理方法(转)

    转自:http://javascript.ruanyifeng.com/htmlapi/canvas.html 概述 Canvas API(画布)用于在网页实时生成图像,并且可以操作图像内容,基本上它 ...

  3. canvas主要属性和方法

    canvas主要属性和方法 方法                                   描述 save()                           保存当前环境的状态 res ...

  4. HTML5 Canvas 2D绘图

    为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/ShiJiaqi. http://www.cnblogs.com/shijiaqi1066/p/4851774. ...

  5. [原创] 改善 Firemonkey Canvas 几何绘图质量问题(移动平台)

    说明: Fiiremonkey 的跨平台能力,大家有目共睹(一码同介面跨四平台),唯独移动平台在几何绘图方面,质量始终不尽人意,我也曾试着去修正(如:修正曲线平滑问题),也曾找过第三方案(如:AggP ...

  6. Java知多少(98)Graphics类的绘图方法

    Graphics类提供基本绘图方法,Graphics2D类提供更强大的绘图能力.本节讲解Graphics类,下节讲解Graphics2D. Graphics类提供基本的几何图形绘制方法,主要有:画线段 ...

  7. Java知多少(99)Graphics2D类的绘图方法

    Java语言在Graphics类提供绘制各种基本的几何图形的基础上,扩展Graphics类提供一个Graphics2D类,它拥用更强大的二维图形处理能力,提供.坐标转换.颜色管理以及文字布局等更精确的 ...

  8. 十一. 图形、图像与多媒体5.Graphics2D类的绘图方法

    Java语言在Graphics类提供绘制各种基本的几何图形的基础上,扩展Graphics类提供一个Graphics2D类,它拥用更强大的二维图形处理能力,提供.坐标转换.颜色管理以及文字布局等更精确的 ...

  9. 十一. 图形、图像与多媒体4.Graphics类的绘图方法

    Graphics类提供基本绘图方法,Graphics2D类提供更强大的绘图能力.本节讲解Graphics类,下节讲解Graphics2D. Graphics类提供基本的几何图形绘制方法,主要有:画线段 ...

随机推荐

  1. su和sudo的使用

    用于用户身份切换 一.su 命令形式 代表内容 su 切换为root,以non-login shell的方式 su - 切换为root,以login shell的方式 su -l 账号 切换为“账号” ...

  2. ACM 第十九天

    积性函数 积性函数线性筛,筛素数,u(n),欧拉函数: vis[]=vis[]=,mu[]=,phi[]=; ;i<=N;++i){ ,phi[i]=i-,prime[++cnt]=i; ,k= ...

  3. vuex介绍--一篇看懂vuejs的状态管理神器

    原文,请点击此链接http://www.ituring.com.cn/article/273487

  4. Perfmon - Windows 自带系统监控工具

    一. 简述 可以用于监视CPU使用率.内存使用率.硬盘读写速度.网络速度等. Perfmon提供了图表化的系统性能实时监视器.性能日志和警报管理,系统的性能日志可定义为二进制文件.文本文件.SQLSE ...

  5. vue-cli项目里npm安装使用elementUI

    第一步:进入到项目目录里 npm i element-ui -S 第二步:在main.js中引入 import ElementUI from 'element-ui' import 'element- ...

  6. JAVA的泛型与反射的联合应用

    通过泛型与反射的结合,可以编写框架来使开发更容易,这里演示的是BaseDao部分的简单使用. BaseDao部分代码: public abstract class BaseDao<T>{ ...

  7. linq的decimal类型保存到数据库只保存到小数点后两位的问题

    今天的一个decimal类型保存到数据的问题困扰了我很长时间,最后就是一个小小的设置问题解决······坑······深坑···· 话不多说,直接说问题,在说答案: 问题:linq当采用EF的DbCo ...

  8. bzoj3489: A simple rmq problem (主席树)

    //========================== 蒟蒻Macaulish:http://www.cnblogs.com/Macaulish/  转载要声明! //=============== ...

  9. [CTSC2014]企鹅QQ hash

    ~~~题面~~~ 题解: 通过观察可以发现,其实题目就是要求长度相等的字符串中有且只有1位字符不同的 ”字符串对“ 有多少. 因为数据范围不大, 所以考虑一种暴力至极的方法. 我们枚举是哪一位不同,然 ...

  10. 参考《Java疯狂讲义》

    参考<Java疯狂讲义>Lambda表达式支持将代码块作为方法参数,Lambda表达式允许使用更简洁的代码来创建只有一个抽象方法的接口(这种接口被称为函数式接口)的实例 1. Lambda ...