快捷搜索:
来自 新京葡娱乐场网址 2019-07-22 02:24 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

【新京葡娱乐场网址】邀请卡生成与下载

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();

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:【新京葡娱乐场网址】邀请卡生成与下载

关键词: