canvas学习笔记、小函数整理

时间：2021-08-26 13:46:01

http://bbs.csdn.net/topics/391493648　　canvas实例分享　　2016-3-16

http://bbs.csdn.net/topics/390582151　　html5 canvas 实现液体效果　　2016-5-11

 CANVAS学习笔记，小函数整理：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

<style type="text/css">

</style>

</head>

<body>

<h3>canvas学习笔记、小函数整理</h3>

<div style="position:relative;width:500px;height:400px;margin:0px;padding:0px;border:1px solid #999;">

<div style="position:absolute;padding:10px;background:rgba(128,128,128,0.5);bottom:0px;z-index:1">这里写字啦。。。。。。。</div>

<canvas id="canvas" width="500" height="400" style="position:absolute;margin:5px;z-index:0"></canvas>

</div>

或

<canvas id="canvas2" width="500" height="400" style="border:1px solid #999;padding:5px;"></canvas>

<script type="text/javascript">

$(function(){

//画方形

function fang_fill(id,color,x,y,width,height) {

    var canvas = document.getElementById(id)

    if (canvas == null){return false;}

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

    context.fillStyle = color;                //"rgba(255,0,0,0.2)";

    context.fillRect(x,y,width,height);

}

//画方形框

function fang_border(id,color,x,y,width,height,borderWidth) {

    var canvas = document.getElementById(id)

    if (canvas == null){return false;}

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

    context.lineWidth = 1;

    context.strokeStyle = color;

    context.strokeRect(x,y,width,height);

}

//画圆形

function circle_fill(id,color,x,y,r) {

    var canvas = document.getElementById(id)

    if (canvas == null){return false;}

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

    context.beginPath();

    context.arc(x,y,r,0,Math.PI * 2, true);

    context.closePath();

    context.fillStyle = color;

    context.fill();

}

//画扇形（未写好）

function fan_fill(id,color,x,y,r,jiao) {

    var canvas = document.getElementById(id)

    if (canvas == null){return false;}

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

    context.beginPath();

    context.lineTo(x,y);

    context.arc(x,y,r,0,Math.PI * jiao, true);

    context.lineTo(x,y);

    context.closePath();

    context.fillStyle = color;

    context.fill();

}

//画五星

function drawStar(id,color,x,y,r) {

    var canvas = document.getElementById(id)

    if (canvas == null){return false;}

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

    context.lineWidth = 5;

    context.beginPath();

    var dit = Math.PI * 4 / 5;

    var sin = Math.sin(0) * r + y;

    var cos = Math.cos(0) * r + x;

    console.log(0+":"+0);

    context.moveTo(cos, sin);

    for (var i = 0; i < 5; i++) {

        var tempDit = dit * i;

        sin = Math.sin(tempDit) * r + y;

        cos = Math.cos(tempDit) * r + x;

        context.lineTo(cos, sin);

        console.log(sin+":"+sin+":"+tempDit);

    }

    context.closePath();

    context.strokeStyle = "red";

    context.fillStyle = color;

    context.fill();

}

//画渐变(y方向)

function gradient_y(id,color1,color2,x,y,width,height){

    var canvas = document.getElementById(id)

    if (canvas == null){return false;}

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

    var g1 = context.createLinearGradient(x,y,x,(y+height));

    g1.addColorStop(0,color1);

    g1.addColorStop(1,color2);

    context.fillStyle = g1;

    context.fillRect(x,y,width,height);

}

//画渐变(x方向)

function gradient_x(id,color1,color2,x,y,width,height){

    var canvas = document.getElementById(id)

    if (canvas == null){return false;}

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

    var g1 = context.createLinearGradient(x,y,(x+width),y);

    g1.addColorStop(0,color1);

    g1.addColorStop(1,color2);

    context.fillStyle = g1;

    context.scale(0.5, 0.5);

    context.rotate(Math.PI / 4);

    context.translate(100, 100);

    context.fillRect(x,y,width,height);

}

//填充文字

function font_fill(id,txt,x,y){

    var canvas = document.getElementById(id)

    if (canvas == null){return false;}

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

    context.fillStyle = "#00f";

    context.font = "40px 微软雅黑";

    //context.textBaseline = 'top';

    context.fillText(txt,x,y);

}

//填充文字边框

function font_border(id,txt,x,y){

    var canvas = document.getElementById(id)

    if (canvas == null){return false;}

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

    context.font = "100px 微软雅黑";

    length = context.measureText(txt);

    context.strokeText(txt,x,y);

}

//保存和恢复状态 （抄的）

function draw18(id) {

    var canvas = document.getElementById(id)

    if (canvas == null){return false;}

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

    context.fillStyle = "red";

    context.save(); //保存了当前context的状态

    context.fillStyle = "black";

    context.fillRect(0, 0, 100, 100);

    context.restore();//恢复到刚刚保存的状态

    context.fillRect(0,120,100,100);

}

//保存文件  canvas.toDataURL(MIME)  （抄的）

function draw19(id) {

    var canvas = document.getElementById(id)

    if (canvas == null){return false;}

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

    context.fillStyle = "rgb(0,0,225)";

    context.fillRect(0, 0, canvas.width, canvas.height);

    context.fillStyle = "rgb(255,255,0)";

    context.fillRect(10, 20, 50, 50);

    //把图像保存到新的窗口

    var w=window.open(canvas.toDataURL("image/jpeg"),"smallwin","width=400,height=350");

}

//function example(id,color1,color2,x,y,width,height){//

    //context.scale(0.5, 0.5);        //缩放

    //context.rotate(Math.PI / 4);    //旋转

    //context.translate(100, 100);    //平移

    //context.fillRect(x,y,width,height);

//}

//例子代码：

//fang_fill("canvas","#f90",10,10,100,100);

//fang_border("canvas","#f90",8,8,104,104);

//circle_fill("canvas","#a9f",150,150,100);

//fan_fill("canvas","#a9f",150,150,100,1/2);

//drawStar("canvas","#f00",100,100,50);

//gradient_y("canvas","#600","#f00",100,50,200,40);

//gradient_y("canvas","#999","#eee",100,100,200,40);

//gradient_x("canvas","#ff0","#f00",100,150,400,40);

font_fill("canvas","啊啊啊啊啊啊啊啊",0,100);

font_border("canvas","呃呃呃呃",120,130);

});

</script>

</body>

</html>

 划线：

//画线

function line_stroke(id,color,x,y,end_x,end_y) {

    var canvas = document.getElementById(id)

    if (canvas == null){return false;}

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

    context.beginPath();//画一条新的线段

    context.strokeStyle = color;

    context.moveTo(x,y);

    context.lineTo(end_x,end_y);

    context.stroke();

}

line_stroke("canvas","#f90",10,10,100,100);

相关文章