>

邀请卡生成与下载

- 编辑:至尊游戏网站 -

邀请卡生成与下载

canvas 入门实战–邀请卡生成与下载

2018/01/04 · HTML5 · Canvas

原文出处: 守候   

强大的<canvas>,强大<canvas>

1.前言

写了很多的javascript和css3的文章,是时候写一篇canvas的了。canvas是html5提供的一个新的功能!至于作用,就是一个画布。然后画笔就是javascript。canvas的用途非常的广,特别是html5游戏以及数据可视化这两个方面。现在canvas给我的感觉就和css3一样,可以不用太厉害,但是必须要会基础的用法。但是以后对canvas的需求,肯定会越来越大。所以canvas很值得学习,而且学好canvas,就是很好的一个加分项。对于这篇文章,我也是以canvas初学者的角度写的,会有很多改善的地方。如果大家觉得我有什么可以改善的,或者建议,欢迎指点迷津!代码已上传github,需要的欢迎star(downloadImg)。

大家看这篇文章之前,要了解javascript的一些基础,也要看着了解一些canvas的api(canvas-MSN教程,canvas菜鸟教程)

<canvas>

我会告诉你我不仅写了这篇博客还录了视频吗?这里是视频地址 。我会告诉你目前前端进阶最好的qq群是 130977811 吗?群里每周都有视频在线分享。

个人认为<canvas>是h5最重量级的新标签了,现在各种h5小游戏都是基于<canvas>的,它为游戏提供了一个功能强大的画布,可在画布上绘制丰富的内容,同时也催生出很多游戏引擎。现在就简单介绍一下<canvas>的一些基本绘图和图片处理功能:

2.邀请卡实例

邀请卡自动生成这个会有的,毕竟有时候,很多邀请卡都是一样的,就是被邀请的人不一样而已,也就是说,整个邀请卡,就是一个名字不一样,那么下面。就写一套代码,根据名字生成邀请卡!

1.绘制线条

绘图的基本步骤是:先用getContext("2d")获取二维绘图环境上下文,有二维那肯定也有三位了?是的,三维就要用到WebGL了,技术水平有限,今天就不讨论三维了(三围肿么这么耳熟~~!)。然后设置画笔样式,lineWidth画笔宽度,strokeStyle画笔颜色,lineCap线头样式。样式设置完毕后就开始绘图了,首先用moveTo()把一个看不到的光标移动到起点位置,然后lineTo()设定重点,最后stroke()画出线条。

图片 1

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
<title>绘制线条</title>
<style>
 body,div{margin:0px;padding:0px;text-align:center}
 #canv{
   border:2px solid black;
   border-radius:4px;
   box-shadow:0px 0px 10px black;
   -webkit-box-shadow:0px 0px 10px black;
   -moz-box-shadow:0px 0px 10px black;
 }
</style>
</head>

<body>
    <h1>绘制线条</h1>
    <canvas id="canv" width="400px" height="300px">
        你若能看到这句话说明你浏览器不支持canvas!
    </canvas>
</body>
<script type="text/javascript">
    var canv = document.getElementById("canv");
   //获取2d上下文
   var ctx = canv.getContext("2d");
   //设置样式
   ctx.lineWidth = 40;
   ctx.strokeStyle = "red";
   ctx.lineCap = "round"; //butt ,square,round
   ctx.beginPath();
   //设置起始点
   ctx.moveTo(20,20);
   ctx.lineTo(200,200);
   //开始绘制定义好的路径
   ctx.stroke();
</script>
</html>

2-1.运行效果图片 2

html代码

JavaScript

<html> <head> <meta charset="utf-8"> <title>下载图片</title> <style> .set-option { float: left; width: 400px; } .set-option .text { width: 200px; height: 40px; padding-left: 10px; border-radius: 4px; border: 1px solid #ccc; } .set-option td { padding: 10px 0; } .set-option td:first-child { text-align: right; padding-right: 10px; } .set-option p { margin: 0; line-height: 16px; } .check-box { width: 16px; height: 16px; margin: 0; vertical-align: top; } button { width: 200px; height: 50px; border: none; color: #fff; font-size: 16px; cursor: pointer; display: block; margin: 10px auto; } button:hover { opacity: .9; } .btn-all { background: #f90; } .btn-save { background: #09f; } .btn-download { background: #4CAF50; } </style> </head> <body> <div> <div class="set-option"> <table> <tr> <td>画布尺寸</td> <td><input type="text" class="text" id="size"/></td> </tr> <tr> <td>背景图片</td> <td><input type="file" id="file"/></td> </tr> <tr> <td>用户名</td> <td> <input type="text" class="text" id="user-name"/> </td> </tr> <tr> <td>用户名x坐标</td> <td> <input type="number" class="text" id="text-option-x"/></br> <p><input type="checkbox" class="check-box" value="1" id="is-center-x">居中显示</p> </td> </tr> <tr> <td>用户名y坐标</td> <td> <input type="number" class="text" id="text-option-y"/></br> <p><input type="checkbox" class="check-box" value="1" id="is-center-y">居中显示</p> </td> </tr> <tr> <td>用户名字体大小</td> <td><input type="number" class="text" id="text-size"/></td> </tr> <tr> <td>文字颜色</td> <td><input type="text" class="text" id="text-color"/></td> </tr> <tr> <td>图片类型</td> <td> <select type="text" class="text" id="img-type"> <option value="jpg">jpg</option> <option value="png">png</option> </select> </td> </tr> </table> <button id="save-image" class="btn-save">效果预览</button> <button id="download-img" class="btn-download">下载当前图片</button> <button id="download-all" class="btn-all">批量导出</button> </div> <div class="show-canvas"> <canvas width=200 height=200 id="thecanvas"></canvas> </div> </div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<html>
<head>
    <meta charset="utf-8">
    <title>下载图片</title>
    <style>
        .set-option {
            float: left;
            width: 400px;
        }
 
        .set-option .text {
            width: 200px;
            height: 40px;
            padding-left: 10px;
            border-radius: 4px;
            border: 1px solid #ccc;
        }
 
        .set-option td {
            padding: 10px 0;
        }
 
        .set-option td:first-child {
            text-align: right;
            padding-right: 10px;
        }
 
        .set-option p {
            margin: 0;
            line-height: 16px;
        }
 
        .check-box {
            width: 16px;
            height: 16px;
            margin: 0;
            vertical-align: top;
        }
 
        button {
            width: 200px;
            height: 50px;
            border: none;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
            display: block;
            margin: 10px auto;
        }
 
        button:hover {
            opacity: .9;
        }
 
        .btn-all {
            background: #f90;
        }
 
        .btn-save {
            background: #09f;
        }
 
        .btn-download {
            background: #4CAF50;
        }
    </style>
</head>
<body>
<div>
    <div class="set-option">
        <table>
            <tr>
                <td>画布尺寸</td>
                <td><input type="text" class="text" id="size"/></td>
            </tr>
            <tr>
                <td>背景图片</td>
                <td><input type="file" id="file"/></td>
            </tr>
            <tr>
                <td>用户名</td>
                <td>
                    <input type="text" class="text" id="user-name"/>
                </td>
            </tr>
            <tr>
                <td>用户名x坐标</td>
                <td>
                    <input type="number" class="text" id="text-option-x"/></br>
                    <p><input type="checkbox" class="check-box" value="1" id="is-center-x">居中显示</p>
                </td>
            </tr>
            <tr>
                <td>用户名y坐标</td>
                <td>
                    <input type="number" class="text" id="text-option-y"/></br>
                    <p><input type="checkbox" class="check-box" value="1" id="is-center-y">居中显示</p>
                </td>
            </tr>
            <tr>
                <td>用户名字体大小</td>
                <td><input type="number" class="text" id="text-size"/></td>
            </tr>
            <tr>
                <td>文字颜色</td>
                <td><input type="text" class="text" id="text-color"/></td>
            </tr>
            <tr>
                <td>图片类型</td>
                <td>
                    <select type="text" class="text" id="img-type">
                        <option value="jpg">jpg</option>
                        <option value="png">png</option>
                    </select>
                </td>
            </tr>
        </table>
        <button id="save-image" class="btn-save">效果预览</button>
        <button id="download-img" class="btn-download">下载当前图片</button>
        <button id="download-all" class="btn-all">批量导出</button>
    </div>
    <div class="show-canvas">
        <canvas width=200 height=200 id="thecanvas"></canvas>
    </div>
</div>
</body>
</html>

效果如图,那么大家细想一下,关于一张邀请卡,有什么东西是需要改变的!看到上图相比不难发现!有如下需要改变的属性:图片的大小,图片,用户名,用户名的坐标(x,y,x轴是否居中,y轴是否居中),用户名字体的大小,用户名字体的颜色,以及下载图片的类型。

这样就得到了如下的参数(大家看到有些参数是有值的,可以想成默认值就行了)

var option = { img: '111.jpg', width: 500, height: 350, fontSize: "20px Microsoft YaHei", color: "black", text: '守候', imgType: 'jpg', x: 30, y: 30, xCenter: false, yCenter: false, };

1
2
3
4
5
6
7
8
9
10
11
12
13
var option = {
    img: '111.jpg',
    width: 500,
    height: 350,
    fontSize: "20px Microsoft YaHei",
    color: "black",
    text: '守候',
    imgType: 'jpg',
    x: 30,
    y: 30,
    xCenter: false,
    yCenter: false,
};

2.绘制矩形

矩形的绘制步骤同上所述,但有两种绘制类型:实心矩形fillRect(起点x,起点y,长,宽),空心矩形strokeRect(起点x,起点y,长,宽)。

图片 3

   var canv = document.getElementById("canv");
   //获取2d上下文
   var ctx = canv.getContext("2d");
   //设置样式
   ctx.lineWidth = 10;
   ctx.strokeStyle = "red"; 

   //绘制实心矩形
   ctx.fillStyle="red";
   ctx.fillRect(10,10,100,100);

2-2.步骤

3.绘制圆形

同样,也分实心和空心,主要用到arc(圆心x,圆心y,半径,其实角度,结束角度*Math.PI/180,顺逆时针);

图片 4

var canv = document.getElementById("canv");
   //获取2d上下文
  var ctx = canv.getContext("2d");
   //设置样式
   ctx.lineWidth = 10;
   ctx.strokeStyle = "red";

 /*  ctx.beginPath();
   //中心点,半径,始末角度,顺逆时针
   ctx.arc(200,200,50,0,270*Math.PI/180,false);
   ctx.stroke();
*/

   //实心
   ctx.fillStyle = "red";
   ctx.beginPath();
   ctx.arc(200,200,50,0,270*Math.PI/180,false);
   ctx.fill();

1.初步效果

根据上面的参数,先初步画一个效果,代码基本都是一个写法,没什么技巧

//画图 function draw(obj) { var canvas = document.getElementById("thecanvas"); //画布大小 canvas.width = obj.width; canvas.height = obj.height; //设置图片 var img = new Image(); img.src = obj.img; var ctx = canvas.getContext("2d"); //设置字体的坐标 var _x = obj.x, _y = obj.y; //是否居中显示 if (obj.xCenter) { _x = obj.width / 2; } if (obj.yCenter) { _y = obj.height / 2; } //图片加载后 img.onload = function () { //先画图片 ctx.drawImage(img, 0, 0); //设置文字的大小 ctx.font = obj.fontSize; //设置文字的颜色 ctx.fillStyle = obj.color; //设置文字坐标 if (obj.xCenter) { ctx.textAlign = "center"; } //画文字 ctx.fillText(obj.text, _x, _y); }; } window.onload = function () { draw(option); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
//画图
function draw(obj) {
    var canvas = document.getElementById("thecanvas");
    //画布大小
    canvas.width = obj.width;
    canvas.height = obj.height;
    //设置图片
    var img = new Image();
    img.src = obj.img;
    var ctx = canvas.getContext("2d");
    //设置字体的坐标
    var _x = obj.x, _y = obj.y;
    //是否居中显示
    if (obj.xCenter) {
        _x = obj.width / 2;
    }
    if (obj.yCenter) {
        _y = obj.height / 2;
    }
    //图片加载后
    img.onload = function () {
        //先画图片
        ctx.drawImage(img, 0, 0);
        //设置文字的大小
        ctx.font = obj.fontSize;
        //设置文字的颜色
        ctx.fillStyle = obj.color;
        //设置文字坐标
        if (obj.xCenter) {
            ctx.textAlign = "center";
        }
        //画文字
        ctx.fillText(obj.text, _x, _y);
    };
}
 
window.onload = function () {
    draw(option);
}

4.擦除

能破就能立,能绘制就能擦除,用clearRect(起点x,起点y,擦出范围长,擦出范围宽)实现擦除。

图片 5

//设置样式
   ctx.lineWidth = 10;
   ctx.fillStyle = "red";
   //绘制矩形
  ctx.fillRect(10,10,200,100);
  //擦除
  ctx.clearRect(30,30,100,50);

图片 62.动态改变参数

看到图已经画好了,工作其实已经完成一半了!

下面就是动态改变参数!这一步其实很简单。
首先,改变画布的尺寸

//画布尺寸 //获取按钮 var size = document.getElementById("size"); size.addEventListener("blur", function () { //根据空格,区分高宽 var _width = parseInt(size.value.replace(/(^s*)|(s*$)/g, "").split(/s+/)[0]), _height = parseInt(size.value.replace(/(^s*)|(s*$)/g, "").split(/s+/)[1]); //把参数的width和height改掉 option.width = _width || 100; option.height = _height || 100; //重新画图 draw(option); });

1
2
3
4
5
6
7
8
9
10
11
12
13
//画布尺寸
//获取按钮
var size = document.getElementById("size");
size.addEventListener("blur", function () {
    //根据空格,区分高宽
    var _width = parseInt(size.value.replace(/(^s*)|(s*$)/g, "").split(/s+/)[0]),
        _height = parseInt(size.value.replace(/(^s*)|(s*$)/g, "").split(/s+/)[1]);
    //把参数的width和height改掉
    option.width = _width || 100;
    option.height = _height || 100;
    //重新画图
    draw(option);
});

上面代码设置了,只要输入框失去了焦点,就会改变画布的大小,下面来运行下,看下效果(gif图差强人意,大家看懂就好)图片 7

canvas没有层级的说法,只要改canvas,都要重绘。哪怕就是一个字移动一个像素。

做好了这个,下面做选择图片的功能!

//选择图片 //获取图片控件 var file = document.getElementById("file"), imagesFile, imageData; file.addEventListener('change', function (e) { //获取图片 imagesFile = e.target.files[0]; //把图片转base64 var reader = new FileReader(); reader.readAsDataURL(imagesFile); //图片加载后 reader.onload = function (e) { //设置option的img属性,再冲洗年绘制 imageData = this.result; option.img = imageData; draw(option); } }); <img src="" />

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//选择图片
//获取图片控件
var file = document.getElementById("file"), imagesFile, imageData;
file.addEventListener('change', function (e) {
    //获取图片
    imagesFile = e.target.files[0];
    //把图片转base64
    var reader = new FileReader();
    reader.readAsDataURL(imagesFile);
    //图片加载后
    reader.onload = function (e) {
        //设置option的img属性,再冲洗年绘制
        imageData = this.result;
        option.img = imageData;
        draw(option);
    }
});
 
<img src="https://segmentfault.com/img/bVZX7E?w=991&h=797" />

图片 8下面开始改文字,用户名这个有点不一样,我以空格分割。如果输入多个用户名,以第一个用户名重绘。下面代码,注释就不写了,还是和上面的逻辑一样!

//用户名 var userName = document.getElementById("user-name"); userName.addEventListener("blur", function () { var _text = userName.value.replace(/(^s*)|(s*$)/g, "").split(/s+/); option.text = _text[0]; draw(option); }); <img src="" />

1
2
3
4
5
6
7
8
9
//用户名
var userName = document.getElementById("user-name");
userName.addEventListener("blur", function () {
    var _text = userName.value.replace(/(^s*)|(s*$)/g, "").split(/s+/);
    option.text = _text[0];
    draw(option);
});
 
<img src="https://segmentfault.com/img/bVZUnM?w=949&h=703" />

图片 9下面开始用户名的坐标,代码方面,也是改option的相关属性

optionXCenter.addEventListener("change", function () { if (optionXCenter.checked) { option.xCenter = true; } else { option.xCenter = false; option.x = parseInt(optionX.value); } draw(option); }); //纵坐标 var optionY = document.getElementById("text-option-y"); optionY.value = option.y; var optionYCenter = document.getElementById("is-center-y"); optionY.addEventListener("input", function () { if (optionYCenter.checked) { option.yCenter = true; } else { option.yCenter = false; option.y = parseInt(optionY.value); } draw(option); }); //是否垂直居中显示 optionYCenter.addEventListener("change", function () { if (optionYCenter.checked) { option.yCenter = true; } else { option.yCenter = false; option.y = parseInt(optionY.value); } draw(option); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
    optionXCenter.addEventListener("change", function () {
        if (optionXCenter.checked) {
            option.xCenter = true;
        }
        else {
            option.xCenter = false;
            option.x = parseInt(optionX.value);
        }
        draw(option);
    });
    //纵坐标
    var optionY = document.getElementById("text-option-y");
    optionY.value = option.y;
    var optionYCenter = document.getElementById("is-center-y");
    optionY.addEventListener("input", function () {
        if (optionYCenter.checked) {
            option.yCenter = true;
        }
        else {
            option.yCenter = false;
            option.y = parseInt(optionY.value);
        }
        draw(option);
    });
    //是否垂直居中显示
    optionYCenter.addEventListener("change", function () {
        if (optionYCenter.checked) {
            option.yCenter = true;
        }
        else {
            option.yCenter = false;
            option.y = parseInt(optionY.value);
        }
        draw(option);
    });

图片 10是否水平居中显示图片 11

其他的属性,字体大小和颜色,基本是一样的代码,运行的效果图我不放了!

//字体颜色 var textColor = document.getElementById("text-color"); textColor.addEventListener("blur", function () { textColor.value === "" ? option.color = "#fff" : option.color = '#' + textColor.value; draw(option); }); //字体大小 var textSize = document.getElementById("text-size"); textSize.addEventListener("input", function () { textSize.value === "" ? option.fontSize = '20px Microsoft YaHei' : option.fontSize = textSize.value + 'px Microsoft YaHei'; draw(option); });

1
2
3
4
5
6
7
8
9
10
11
12
//字体颜色
var textColor = document.getElementById("text-color");
textColor.addEventListener("blur", function () {
    textColor.value === "" ? option.color = "#fff" : option.color = '#' + textColor.value;
    draw(option);
});
//字体大小
var textSize = document.getElementById("text-size");
textSize.addEventListener("input", function () {
    textSize.value === "" ? option.fontSize = '20px Microsoft YaHei' : option.fontSize = textSize.value + 'px Microsoft YaHei';
    draw(option);
});

5.渐变

可实现两种渐变方式:线性渐变createLinearGradient(),径向渐变createRadialGradient()。

图片 12

 var canv = document.getElementById("canv");
   //获取2d上下文
  var ctx = canv.getContext("2d");

  //径向渐变
  var grd=ctx.createRadialGradient(100,100,10,100,100,50);
  grd.addColorStop(0.1,"red");
  grd.addColorStop(0.8,"blue");
  ctx.fillStyle=grd;
  ctx.fillRect(0,0,200,200);

/* 
  //线性渐变 
  var grd=ctx.createLinearGradient(0,0,200,0);
  grd.addColorStop(0.2,"red");//必须0-1之间的数,代表颜色的渐变权重
  grd.addColorStop(0.7,"blue");
  ctx.fillStyle=grd;
  ctx.fillRect(0,0,200,200);
  */

3.按钮操作

效果预览

就是预览当前canvas的一个效果,这个就很简单了,就是新开一个窗口,然后把图片写进去而已

//预览图片 function saveImageInfo() { var mycanvas = document.getElementById("thecanvas"); //生成图片 var image = mycanvas.toDataURL("image/png"); var w = window.open('about:blank', 'image from canvas'); //把图片新进新的窗口 w.document.write("<img src="%22%20+%20image%20+%20%22" alt="from canvas" />"); } var saveButton = document.getElementById("save-image"); saveButton.addEventListener('click', saveImageInfo);

1
2
3
4
5
6
7
8
9
10
11
//预览图片
function saveImageInfo() {
    var mycanvas = document.getElementById("thecanvas");
    //生成图片
    var image = mycanvas.toDataURL("image/png");
    var w = window.open('about:blank', 'image from canvas');
    //把图片新进新的窗口
    w.document.write("<img src="%22%20+%20image%20+%20%22" alt="from canvas" />");
}
var saveButton = document.getElementById("save-image");
saveButton.addEventListener('click', saveImageInfo);

图片 13

下载当前图片

下载图片这个,基本也是写法的,都是些记忆的东西

//图片类型 var imgType = document.getElementById("img-type"); imgType.addEventListener("change",function () { option.imgType=this.value; }); //下载图片 function downloadImg(fileName) { //获取canvas var myCanvas = document.getElementById("thecanvas"); //设置图片类型 var image = myCanvas.toDataURL("image/" + option.imgType).replace("image/" + option.imgType, "image/octet-stream"); var save_link = document.createElementNS('', 'a'); save_link.href = image; //设置下载图片的名称 save_link.download = fileName + '.' + option.imgType; //下载图片 var event = document.createEvent('MouseEvents'); event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); save_link.dispatchEvent(event); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//图片类型
var imgType = document.getElementById("img-type");
imgType.addEventListener("change",function () {
    option.imgType=this.value;
});
//下载图片
function downloadImg(fileName) {
    //获取canvas
    var myCanvas = document.getElementById("thecanvas");
    //设置图片类型
    var image = myCanvas.toDataURL("image/" + option.imgType).replace("image/" + option.imgType, "image/octet-stream");
    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = image;
    //设置下载图片的名称
    save_link.download = fileName + '.' + option.imgType;
    //下载图片
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    save_link.dispatchEvent(event);
}

图片 14

批量下载图片

这个复杂一点,但也不难,下面一步一步来!

1.首先批量导出,那么用户名我这里是使用空格分割,那么现在我在option里面,弄一个字段textAll,所有文字的集合。all代表是否是批量下载。fn属性代表回调函数

//批量导出 var downloadAll = document.getElementById("download-all"); downloadAll.addEventListener('click', function () { var _text = userName.value.replace(/(^s*)|(s*$)/g, "").split(/s+/); option.textAll = _text; option.all = true; option.fn = downloadImg; draw(option); });

1
2
3
4
5
6
7
8
9
//批量导出
var downloadAll = document.getElementById("download-all");
downloadAll.addEventListener('click', function () {
    var _text = userName.value.replace(/(^s*)|(s*$)/g, "").split(/s+/);
    option.textAll = _text;
    option.all = true;
    option.fn = downloadImg;
    draw(option);
});

2.然后修改绘制的函数draw,判断是否是全部绘制的情况!

JavaScript

function draw(obj) { var canvas = document.getElementById("thecanvas"); //画布大小 canvas.width = obj.width; canvas.height = obj.height; //设置图片 var img = new Image(); img.src = obj.img; var ctx = canvas.getContext("2d"); //设置字体的坐标 var _x = obj.x, _y = obj.y; //是否居中显示 if (obj.xCenter) { _x = obj.width / 2; } if (obj.yCenter) { _y = obj.height / 2; } //图片加载后 img.onload = function () { //是否是全部打印 if(obj.all){ //遍历textAll for(var i=0;i<obj.textAll.length;i++){ //绘制图片 ctx.drawImage(img,0,0); //设置字体大小 ctx.font=obj.fontSize; //设置字体颜色 ctx.fillStyle=obj.color; //是否居中显示 if(obj.xCenter){ ctx.textAlign="center"; } //绘制文字 ctx.fillText(obj.textAll[i], _x,_y); //是否回调 if(obj.fn){ obj.fn(obj.textAll[i]); } } //最后取消全部批量下载 defult.all=false; } else{ ctx.drawImage(img,0,0); ctx.font=obj.fontSize; ctx.fillStyle=obj.color; if(obj.xCenter){ ctx.textAlign="center"; } ctx.fillText(obj.text, _x,_y); } }; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
function draw(obj) {
    var canvas = document.getElementById("thecanvas");
    //画布大小
    canvas.width = obj.width;
    canvas.height = obj.height;
    //设置图片
    var img = new Image();
    img.src = obj.img;
    var ctx = canvas.getContext("2d");
    //设置字体的坐标
    var _x = obj.x, _y = obj.y;
    //是否居中显示
    if (obj.xCenter) {
        _x = obj.width / 2;
    }
    if (obj.yCenter) {
        _y = obj.height / 2;
    }
    //图片加载后
    img.onload = function () {
        //是否是全部打印
        if(obj.all){
            //遍历textAll
            for(var i=0;i<obj.textAll.length;i++){
                //绘制图片
                ctx.drawImage(img,0,0);
                //设置字体大小
                ctx.font=obj.fontSize;
                //设置字体颜色
                ctx.fillStyle=obj.color;
                //是否居中显示
                if(obj.xCenter){
                    ctx.textAlign="center";
                }
                //绘制文字
                ctx.fillText(obj.textAll[i], _x,_y);
                //是否回调
                if(obj.fn){
                    obj.fn(obj.textAll[i]);
                }
            }
            //最后取消全部批量下载
            defult.all=false;
        }
        else{
            ctx.drawImage(img,0,0);
            ctx.font=obj.fontSize;
            ctx.fillStyle=obj.color;
            if(obj.xCenter){
                ctx.textAlign="center";
            }
            ctx.fillText(obj.text, _x,_y);
        }
    };
}

6.像素处理:黑白处理,反色处理

原理:先把要处理的图片读取到canvas上,然后遍历每个像素点,更改像素的rgb值即可。

黑白处理:

图片 15

反色处理:

图片 16

<body>
    <h1>像素处理</h1>
  <img src = "logo.png" id="logo" />
    <canvas id="canv" width="800px" height="800px">
        你若能看到这句话说明你浏览器不支持canvas!
    </canvas>

</body>
<script type="text/javascript">
  var canv = document.getElementById("canv");
   //获取2d上下文
  var ctx = canv.getContext("2d");

  var image = new Image();
  image.src = "01.jpg";
  image.onload = function(){
  ctx.drawImage(image,0,0);
  var imgdata = ctx.getImageData(0,0,250,250);
  var pixels = imgdata.data;

/* // 遍历每个像素并对 RGB 值进行取反
for (var i=0, n=pixels.length; i<n; i+= 4){
pixels[i] = 255-pixels[i];  //r
pixels[i+1] = 255-pixels[i+1];  //g
pixels[i+2] = 255-pixels[i+2];  //b
} */


  // 遍历每个像素并更改 RGB 值
  for (var i=0, n=pixels.length; i<n; i+= 4){
  var grayscale = pixels[i]*.3+pixels[i+1]*.59+pixels[i+2]*.11;  //灰度处理
    pixels[i ] = grayscale; // r
    pixels[i+1] = grayscale; // g
    pixels[i+2] = grayscale; // b
  }

  // 在指定位置进行像素重绘
  ctx.putImageData(imgdata, 250, 0);
}; 

</script>

图片 17图片 18

7.小动画

动画原理:先绘制一张图片drawImage(img,x,y,80,80);时刻更改图片的坐标x,y来使图片不断移动。

图片 19

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>动画</title>
</head>
<body>
<canvas id="cav" width="500" height="500">// 设置绘图环境
     var cav = document.getElementById("cav");
     var cxt=cav.getContext('2d'); 
    //初始位置
     var x=5;
     var y=5;
    // 创建绘图对象,并且画出来 
     var img =new Image();
     img.src="logo.png";
     draw();
     function draw()
     {        //清除上一帧动画
          cxt.clearRect(0,0,500,500);  //十分重要
          x+=5;
          y+=5;
          cxt.drawImage(img,x,y,80,80);
     }
     //设定动画,时间间隔100毫秒
    var time = setInterval(draw,100);

    function stop(){
        clearInterval(time);
    }
</script>
</body>
</html>

倘若我们不清除上一次绘制的结果效果会怎样呢?那就注释掉cxt.clearRect(0,0,500,500);试一试。

function draw()
     {        //清除上一帧动画
         //注释掉啦 cxt.clearRect(0,0,500,500);  //十分重要
          x+=5;
          y+=5;
          cxt.drawImage(img,x,y,80,80);
     }

效果将连续出现一叠绘制的图片:

图片 20

3.小结

关于canvas入门的第一篇文章,就写到这里了。写完之后,也发现自己对canvas的也是有很多的不懂!上文的这例子,知识canvas很简单的一个入门实例。canvas如果深入学习,能做到很多让人惊讶的效果,这个得以后要加强学习,如果发现些值得记录的知识,我也会写文章。canvas是一个非常值得学习的知识,也是很有趣的一个知识。期待与大家有更多的交流和学习!

1 赞 2 收藏 评论

图片 21

8.拖拽原理+canvas实现简易画板

图片 22<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <style> #canvas{cursor:default;} #red{background:red; width:30px;height: 27px} #blue{background:blue; width:30px;height: 27px} #yellow{background:yellow; width:30px;height: 27px} #white{background:white; width:30px;height: 27px} #zi{background:#8B026B; width:30px;height: 27px} </style> </head> <body> <canvas id="canvas" width="600" height="400"> </canvas> <br><label>画笔颜色:</label> <input type="button" id="red" onclick="linecolor='red'"> <input type="button" id="blue" onclick="linecolor='blue'"> <input type="button" id="yellow" onclick="linecolor='yellow'"> <input type="button" id="white" onclick="linecolor='white'"> <input type="button" id="zi" onclick="linecolor='#8B026B'"> <label>画笔宽度:</label> <select id="sel"> <option value="4">4</option> <option value="8">8</option> <option value="16">16</option> <option value="30">30</option> </select> <input type="button" value="生成图片" onclick="toImg()"><br> <img id="image" src="" width="500px" height="200px"> <script type="text/javascript"> //下拉画笔宽度 window.onload=function(){ var huabi=document.getElementById("sel"); huabi.onchange=function(){ linw=huabi.value; }; //linw=huabi; }; var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); //画一个黑色矩形 ctx.fillStyle="#002200"; ctx.fillRect(0,0,600,400); //按下标记 var onoff=false; var oldx=-10; var oldy=-10; //设置颜色默认为白色 var linecolor="white"; //画笔宽度 var linw=5; //鼠标移动事件,事件绑定 canvas.addEventListener("mousedown",down,false); canvas.addEventListener("mousemove",draw,true); canvas.addEventListener("mouseup",up,false); function down(event){ onoff=true; oldx=event.pageX; oldy=event.pageY; } function up(){ onoff=false; } function draw(event){ if(onoff==true) { var newx=event.pageX; var newy=event.pageY; ctx.beginPath(); ctx.moveTo(oldx,oldy); ctx.lineTo(newx,newy); ctx.strokeStyle=linecolor; ctx.lineWidth=linw; ctx.lineCap="round"; ctx.stroke(); oldx=newx; oldy=newy; } } function toImg(){ document.getElementById("image").src=canvas.toDataURL("image/jpg"); } </script> </body> </html> 点我展开代码

效果:

图片 23

内容很基础,各位见笑啦。

 

canvas 我会告诉你我不仅写了这篇博客还录了视频吗?这里是视频地址。我会告诉你目前前端进阶最好的qq群是 1309...

本文由门户名站发布,转载请注明来源:邀请卡生成与下载