新普金娱乐网址


柳忠秧撰南宁城市文化大旨词:岳阳楼序·洪都新篇(或)滕王旧序·洪都新篇地理

西南的今天地理,只怕是成套北方的前天

【HTML5初探之绘制图像(下)】看自己canvas成分引领下一代web页面

  • 四月 08, 2019
  • 地理
  • 没有评论

文/木棉【作者】

接上1篇:【HTML5初探之绘制图像(上)】看自己canvas成分引领下一代web页面

2017—5

导航

【初探HTML5之使用新标签布局】用html五布局作者的博客页!

【HTML5初探之form标签】解放表单验证、增Gavin件上传、集成拖放

【HTML伍初探之绘制图像(上)】看小编canvas成分引领下一代web页面

【HTML五初探之绘制图像(下)】看自个儿canvas元素引领下一代web页面

【HTML伍初探之多媒体成分】录制播放HTML伍、Flash什么人才是王道?

【HTML5初探之本地存款和储蓄】借使未有数据库。。。

【HTML伍初探之离线应用】怎么着塑造零请求、无流量的网址?

【HTML5初探之通讯API】跨域门槛不再高、数据推送不是梦

【HTML5初探之Web
Workers】网页也能八线程

【HTML五初探之吉优location
API】让我们来回到地理消息

 

地理 1

绘图渐变图形

fillStyle除了指定颜色外,还可以指定填充对象。
绘制线性渐变时,需要用到LinearGradient对象,创建函数为:
createLinearGradient(xStart, yStart, xEnd, yEnd);
xStart为渐变起始横坐标
yStart为渐变起始纵坐标
xEnd为渐变结束横坐标
yEnd为渐变结束纵坐标
通过该方法可以创建一个使用两个坐标点的LinearGradient对象。
而后在通过addColorStop进行颜色设定:
addColorStop(offset, color)
offset为所设定颜色离开起始点的偏移量(0,1之间)
color为指定的颜色。
因为是渐变至少需要使用两次addColorStop方法。
最后将fillStyle设定为LinearGradient对象执行填充变可绘制图形了。

地理 2地理 3制图渐变图形

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6         div
 7         {
 8             position: absolute;
 9             width: 1px;
10             height: 1px;
11             line-height: 1px;
12         }
13     </style>
14     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
15     <script type="text/javascript">
16         //x2 + y2 = r2;
17         $(document).ready(function () {
18             //先画x,y
19             var canvas = $('#canvas')[0];
20             var ctx = canvas.getContext('2d');
21 
22             //#99d9ea
23             var g1 = ctx.createLinearGradient(0, 0, 0, 300);
24             g1.addColorStop(0, 'gray');
25             g1.addColorStop(1, '#99d9ea');
26             ctx.fillStyle = g1;
27             ctx.fillRect(0, 0, 400, 300);
28 
29         });
30     
31     </script>
32 </head>
33 <body>
34     <canvas id="canvas" width="400" height="300">
35     </canvas>
36 </body>
37 </html>

地理 4地理 5

     
二月,一个赵歌燕舞,鬼客白的时令,因工作涉及,前往晋北,沿途所见所闻,竟生出些许感动来…

绘制径向渐变

径向渐变:沿着圆形的方向向外进行扩散渐变,比如沿着太阳半径方向扩散出去的光晕。
createRediaGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)
radiusStart与radiusStart分别代表开始圆的半径与结束圆的半径

地理 6地理 7向阳渐变

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         //x2 + y2 = r2;
 8         $(document).ready(function () {
 9             //先画x,y
10             var canvas = $('#canvas')[0];
11             var ctx = canvas.getContext('2d');
12 
13             //#99d9ea
14             var g1 = ctx.createRadialGradient(400, 0, 0, 400, 0, 400);
15             g1.addColorStop(0.1, 'gray');
16             g1.addColorStop(0.5, 'red');
17             g1.addColorStop(1, '#99d9ea');
18             ctx.fillStyle = g1;
19             ctx.fillRect(0, 0, 400, 300);
20 
21         });
22     
23     </script>
24 </head>
25 <body>
26     <canvas id="canvas" width="400" height="300">
27     </canvas>
28 </body>
29 </html>

地理 8地理 9

地理 10

 绘制变形图形

 大家有时会碰着这么二个作用:旋转相册、放大照片,那里就介绍怎样变形图形:

translate(x, y)用于移动坐标轴原点,默认在左上角
scale(x, y)用于将图形放大,xy分别是各自坐标轴放大的倍数
rotate(angle)用于旋转图形,angle为角度值

地理 11地理 12运动增添旋转图形

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         //x2 + y2 = r2;
 8         $(document).ready(function () {
 9             //先画x,y
10             var canvas = $('#canvas')[0];
11             var ctx = canvas.getContext('2d');
12             ctx.fillStyle = '#99d9ea';
13             ctx.fillRect(0, 0, 400, 300);
14 
15             ctx.fillStyle = 'red';
16             ctx.fillRect(10, 10, 50, 50);
17 
18             ctx.translate(60, 60);//原点平移
19             ctx.fillRect(0, 0, 50, 50);
20 
21             ctx.translate(60, 60); //原点平移
22             ctx.scale(1.5, 1.2); //放大
23             ctx.fillRect(0, 0, 50, 50);
24 
25             ctx.translate(60, 60); //原点平移
26             ctx.rotate(Math.PI / 10); //旋转
27             ctx.fillRect(0, 0, 50, 50);
28 
29         });
30     
31     </script>
32 </head>
33 <body>
34     <canvas id="canvas" width="400" height="300">
35     </canvas>
36 </body>
37 </html>

地理, 地理 13

       
晋之北,峰峦起伏,群山层叠,有令人侧指标芦芽山、管涔山和伍岳之一的北岳黄山。黑龙江的老妈河汾水就发源于宁武。由于此地辽朝系中原与少数民族接壤之地,又是西出塞外的交通要道,由此,很久在此之前即是兵家必争之地。那片广袤的土地,物产充裕,人杰地灵,历史厚重。有偏关、宁武关、雁门关等古隘口,宋、辽金沙滩古战场,青城山悬空寺,天镇县木塔,还有明清时代开凿的云冈石窟。

矩阵变换

变换矩阵:专门用来实现图形变形,与坐标配合使用,达到变形的目的。
transform(m11, m12, m21, m22, dz, dy)方法可修改变换矩阵
该方法使用一个新的变换矩阵与当前变换矩阵进行乘法运算
m参数用以修改使用这个方法后,绘制图形的计算方法,以达到变形的目的;
dx与dy分别表示将坐标原点在各自坐标上移动对应单位
PS:这块我也看得模模糊糊的,据说需要掌握矩阵相关知识,我这里简述便是

那块知识点,作者从未搞掌握,暂且不描述了。

地理 14

 图形组成

 三个图形之间或许发生重合。前边世的会遮盖先出现的,有时大家想在上边做点操作,那里变提供了贰个globalCompositeOperation属性决定图形组成措施。

 该属性文字很多,笔者那里直接上测试代码了:

地理 15地理 16图片组成

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         //x2 + y2 = r2;
 8         $(document).ready(function () {
 9             //先画x,y
10             var canvas = $('#canvas')[0];
11             var ctx = canvas.getContext('2d');
12 
13             ctx.fillStyle = 'blue';
14             ctx.fillRect(10, 10, 60, 60);
15             ctx.globalCompositeOperation = 'xor';//lighter
16             ctx.beginPath();
17             ctx.fillStyle = 'red';
18             ctx.arc(60, 60, 30, 0, Math.PI * 2);
19             ctx.fill();
20 
21         });
22     
23     </script>
24 </head>
25 <body>
26     <canvas id="canvas" width="400" height="300">
27     </canvas>
28 </body>
29 </html>

地理 17地理 18

       
由于地理上的原故,晋北常年天气温度偏低,农作物生长平均比南方晚半季。从格勒诺布尔起程,车过荆门,原平,眼下出现了1幅流动的农耕图。一排排垂直的白杨树如地界般将土地分隔成1块1块,农民开着拖拉机在田间耕作,几垄绿绿的冬玉米夹杂在裸露的黄土地之间,如同向芸芸众生呈现着春的来到。田垄上多少个农家挑着担子,嘴里哼唱着小曲向田间运送肥料。地头上青烟袅袅,农妇们忙着烧荒,撒肥为播种前做着准备。正可谓,“人间5月天,农人好种田,今洒一粒仔,秋来丰满园”。

绘图阴影

绘制阴影只需设定以下属性:
shadowOffsetX
shadowOffsetY
shadowColor
shadowBlur 阴影模糊范围

地理 19地理 20自小编是四个影子

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         //x2 + y2 = r2;
 8         $(document).ready(function () {
 9             //先画x,y
10             var canvas = $('#canvas')[0];
11             var ctx = canvas.getContext('2d');
12 
13             ctx.fillStyle = 'blue';
14             ctx.shadowOffsetX = 10;
15             ctx.shadowOffsetY = 10;
16             ctx.shadowColor = 'red';
17             ctx.shadowBlur = 7.5;
18 
19             ctx.fillRect(10, 10, 60, 60);
20 
21         });
22     
23     </script>
24 </head>
25 <body>
26     <canvas id="canvas" width="400" height="300">
27     </canvas>
28 </body>
29 </html>

地理 21

地理 22

行使图像

绘制图像有以下几个方法:
drawImage(img, x, y)
drawImage(img, x, y, w, h)
drawImage(img, sx, sy, sw, sh, dz, dy, dw, dh)
前两个函数都很好理解,第三个我第一眼是没有看懂的:
sx\sy 分别代表源图像被复制区域在画布起始横坐标纵坐标
sw\sh 表示被复制被复制区域的高宽(即做图像局部复制)
dx\dy 表示被复制后的图像在画布上的位置
dw\dh 表示最后的高宽

先是个和第三个便是是还是不是缩放的差距:

地理 23地理 24上一张本身的果照

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         $(document).ready(function () {
 8             draw();
 9 
10         });
11         function draw() {
12             //获取canvas对象
13             var canvas =  document.getElementById('canvas');
14             if (canvas == null) {
15                 return false;
16             }
17             var ctx = canvas.getContext('2d');
18             ctx.fillStyle = '#99d9ea';
19             ctx.fillRect(0, 0, 400, 300); //填充画布结束
20 
21             var img = new Image();
22             img.src = 'yexiaochai.jpg';
23             img.onload = function () {
24                 ctx.drawImage(img, 10, 10, 400, 300);
25             };
26         }
27       
28 
29     </script>
30 </head>
31 <body>
32     <canvas id="canvas" width=400 height="300" >
33     </canvas>
34     <br />
35 </body>
36 </html>

地理 25地理 26

点名高宽与不点名的界别。

       
车子掠过农家,小院里不胫而走鸡鸣犬吠声。一枝孔雀蓝的桃花探出墙头,隔墙望去,院内堆放着成垛的玉茭粒及农具,新盖的农舍屋顶上整齐排列着太阳能热水器,院中停放的小车和轻型运货车使本人看来现代化带给晋北乡间的新转变。过去,晋北是贫穷落后的代名词,近年来,人们脸上洋溢着幸福、欢跃的笑脸,写满了对新生活的心仪。

其四个函数的应用,局地放大也许私分的功用,只须要调动高宽缩放

地理 27地理 28壹部分剪切

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         $(document).ready(function () {
 8             draw();
 9 
10         });
11         function draw() {
12             //获取canvas对象
13             var canvas =  document.getElementById('canvas');
14             if (canvas == null) {
15                 return false;
16             }
17             var ctx = canvas.getContext('2d');
18             ctx.fillStyle = '#99d9ea';
19             ctx.fillRect(0, 0, 1200, 600); //填充画布结束
20 
21             var img = new Image();
22             img.src = 'yexiaochai.jpg';
23             img.onload = function () {
24                 ctx.drawImage(img, 0, 0);
25 
26                 ctx.drawImage(img, 200, 0, 160, 150, 400, 0, 160, 150);
27             };
28         }
29       
30 
31     </script>
32 </head>
33 <body>
34     <canvas id="canvas" width=1200 height="600" >
35     </canvas>
36     <br />
37 </body>
38 </html>

地理 29

       
进入绥化境地,山势陡然险峻起来,放眼望去,危峰突兀、怪石嶙峋、山影重重、云遮雾嶂。在单方面覆盖着青草的阳坡上,一大群暗黄的羊儿欢腾地纵身着、奔跑着……车子抵达阳江,天已大多中午,仰望穹窿是那么高远、深邃,十七月的哈里斯堡,风已略微微醺了,而那里风中照旧带着硬冷的含意,一派塞外的觉得。几天里,丽水人强行豪放的人性令作者回想长远,茂有名的人热情好客和幽默诙谐的言语越发在自身脑海里久久的萦绕……

图像剪切

赶巧那些剪切依然水的,接下去才是真正的剪切。。。

地理 30地理 31圆形裁剪

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         $(document).ready(function () {
 8             draw();
 9 
10         });
11         function draw() {
12             //获取canvas对象
13             var canvas =  document.getElementById('canvas');
14             if (canvas == null) {
15                 return false;
16             }
17             var ctx = canvas.getContext('2d');
18             ctx.fillStyle = '#99d9ea';
19             ctx.fillRect(0, 0, 500, 500); //填充画布结束
20 
21             var img = new Image();
22             img.src = 'yexiaochai.jpg';
23             img.onload = function () {
24                 ctx.beginPath();
25                 ctx.fillStyle = 'red';
26                 ctx.arc(250, 100, 100, 0, Math.PI * 2);
27                 ctx.fill();
28                 ctx.clip();
29                 ctx.drawImage(img, 0, 0);
30             };
31         }
32       
33 
34     </script>
35 </head>
36 <body>
37     <canvas id="canvas" width=500 height="500" >
38     </canvas>
39     <br />
40 </body>
41 </html>

地理 32

      晋北不单孕育了此处的山岭万物,也孕育了那里的孩子!

像素处理

Canvas api可以获取图像的每一个像素,并得到像素的rgb,使用函数为:
getImageData(sx, sy, sw, sh)

总结举个例子吗:

地理 33地理 34View Code

 1  1 <!DOCTYPE html>
 2  2 <html xmlns="http://www.w3.org/1999/xhtml">
 3  3 <head>
 4  4     <title></title>
 5  5     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
 6  6     <script type="text/javascript">
 7  7         $(document).ready(function () {
 8  8             draw();
 9  9 
10 10         });
11 11         function draw() {
12 12             //获取canvas对象
13 13             var canvas =  document.getElementById('canvas');
14 14             if (canvas == null) {
15 15                 return false;
16 16             }
17 17             var ctx = canvas.getContext('2d');
18 18             ctx.fillStyle = '#99d9ea';
19 19             ctx.fillRect(0, 0, 500, 500); //填充画布结束
20 20 
21 21             var img = new Image();
22 22             img.src = 'yexiaochai.jpg';
23 23             img.onload = function () {
24 24                 ctx.drawImage(img, 0, 0);
25 25                 var imgData = ctx.getImageData(0, 0, 200, 200);
26 26                 for (var i = 0, len = imgData.data.length; i < len; i += 4) {
27 27                     imgData.data[i + 0] = 255 - imgData.data[i + 0];
28 28                     imgData.data[i + 1] = 255 - imgData.data[i + 2];
29 29                     imgData.data[i + 2] = 255 - imgData.data[i + 1];
30 30                 }
31 31                 ctx.putImageData(imgData, 0, 0);
32 32             };
33 33         }
34 34       
35 35 
36 36     </script>
37 37 </head>
38 38 <body>
39 39     <canvas id="canvas" width=500 height="500" >
40 40     </canvas>
41 41     <br />
42 42 </body>
43 43 </html>

 

地理 35

绘图像和文字字

地理 36地理 37制图带阴影的文字

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         $(document).ready(function () {
 8             draw();
 9 
10         });
11         function draw() {
12             //获取canvas对象
13             var canvas =  document.getElementById('canvas');
14             if (canvas == null) {
15                 return false;
16             }
17             var ctx = canvas.getContext('2d');
18             ctx.fillStyle = 'black';
19             ctx.font = 'bold 30px sans-serif';
20             ctx.shadowOffsetX = 4;
21             ctx.shadowOffsetY = 4;
22             ctx.shadowColor = 'gray';
23             ctx.shadowBlur = 7.5;
24             ctx.fillText('刀狂剑痴叶小钗', 10, 100);
25         }
26     </script>
27 </head>
28 <body>
29     <canvas id="canvas" width=500 height="500" >
30     </canvas>
31     <br />
32 </body>
33 </html>

地理 38

保留与还原状态

我们在图像剪切时有个问题,如果操作结束还想继续绘制,又不取消裁剪范围的话,急需要用到状态保存与恢复了。
api提供save与restore完成相关功能
其分别用于保存与恢复图形上下文的绘图状态。

文件保留

 大家画了成都百货上千图形,然则该如何保存呢?

地理 39地理 40保存为当三步跳件

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         $(document).ready(function () {
 8             draw();
 9 
10         });
11         function draw() {
12             //获取canvas对象
13             var canvas =  document.getElementById('canvas');
14             if (canvas == null) {
15                 return false;
16             }
17             var ctx = canvas.getContext('2d');
18             ctx.fillStyle = 'black';
19             ctx.font = 'bold 30px sans-serif';
20             ctx.shadowOffsetX = 4;
21             ctx.shadowOffsetY = 4;
22             ctx.shadowColor = 'gray';
23             ctx.shadowBlur = 7.5;
24             ctx.fillText('刀狂剑痴叶小钗', 10, 100);
25             window.location = canvas.toDataURL('image/jpeg');
26 
27         }
28     </script>
29 </head>
30 <body>
31     <canvas id="canvas" width=500 height="500" >
32     </canvas>
33     <br />
34 </body>
35 </html>

地理 41

自家只想说,你好黑啊。。。。

简易的动画片制作

学到那里,我突然开光了,作者忽然领悟本人近日在干什么了!!!

卡通制作,使用那一个事物得以动画制作,换句话说,做游戏能够用它来了哇???如此一来小编豁然就感觉到那一个东西确实改变了前者啊!!!

所谓动画就是不断的檫除重绘的过程

地理 42地理 43一举手一投足的矩形

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         $(document).ready(function () {
 8             var canvas = document.getElementById('canvas');
 9             if (canvas == null) {
10                 return false;
11             }
12             var ctx = canvas.getContext('2d');
13 
14             draw(ctx, canvas);
15 
16         });
17         function draw(ctx, canvas) {
18             //获取canvas对象
19 
20             ctx.fillStyle = 'black';
21             var width = canvas.width;
22             var height = canvas.height;
23             var step = 0;
24             setInterval(function () {
25                 ctx.clearRect(0, 0, width, height);
26                 ctx.fillStyle = 'red';
27                 ctx.fillRect(step, 0, 20, 20);
28                 step += 20;
29             }, 100);
30 
31 
32         }
33     </script>
34 </head>
35 <body>
36     <canvas id="canvas" width=500 height="500" >
37     </canvas>
38     <br />
39 </body>
40 </html>

该矩形会由左至右的移位。。。。

结语

就个人来说,Canvas那章测度是HTML5中相比较干燥的事物了,作者就学进度中就不太提得起劲,完了当中很多图形都是要有肯定数学知识的。

接下来那章的函数之多,完了小编猜不要多长期小编又会遗忘。

可是:那章类容应该是1对1关键的,因为最后制作动画时,小编突然觉得是否游玩正是索要他吗???于是马上去查了下资料:

分享2玖款基于 HTML伍 Canvas
开发的网游

于是老夫找到了此篇小说,才觉获得其真正用途,看来现在该知识点必须牢固控制特出利用啊!!!! 

相关文章

No Comments, Be The First!
近期评论
    分类目录
    功能
    网站地图xml地图