程序流程设计方案HTML5 Canvas API

日期:2021-01-20 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站


拷贝编码
编码以下:

<script type="text/javascript">
try
{
document.createElement("Canvas").getContext("2d");
document.getElementById("support").innerHTML = "OK";
}
catch (e)
{
document.getElementById("support").innerHTML = e.message;
}
</script>

添加Canvas

<canvas id="diagonal" style="border:1px solid blue;" width="200" height="200"/>


拷贝编码
编码以下:

//获得Canvas元素及其制图左右文var canvas = document.getElementById("diagonal");
var context = canvas.getContext("2d");
//用肯定座标来建立1条相对路径
context.beginPath();
context.moveTo(70, 140);
context.lineTo(140, 70);
//将这条线绘图到Canvas上
context.stroke();

转换

能够根据转换(放缩、平移、转动)等做到和上面同样的实际效果。

用转换的方法绘图对角线


拷贝编码
编码以下:

//获得Canvas元素及其制图左右文
var canvas = document.getElementById("diagonal");
var context = canvas.getContext("2d");
//储存当今制图情况
context.save();
//向右正下方挪动制图左右文
context.translate(70, 140);
//以原点为起始点,绘图与前面同样的直线
context.beginPath();
context.moveTo(0, 0);
context.lineTo(70, ⑺0);
context.stroke();</p> <p>context.restore();

相对路径

HTML5 Canvas API中的相对路径意味着你期待展现的任何样子。

beginPath():无论刚开始绘图何种图型,第1个必须启用的便是beginPath。这个简易的涵数不带任何主要参数,它用来通告canvas即将刚开始绘图1个新的图型了。

moveTo(x,y):不绘图,将当今部位挪动到新的总体目标座标(x,y)。

lineTo(x,y):不但将当今部位挪动到新的总体目标座标(x,y),并且在两个座标之间画1条平行线。

closePath():这个涵数个人行为和lineTo很像,唯1的区别在于closePath会将相对路径的起止座标全自动做为总体目标座标。它还会通告canvas当今绘图的图型早已闭合或产生了彻底封闭式地区,这对未来的填充和描边都十分有效。

绘图1个松树地树冠


拷贝编码
编码以下:

function createCanopyPath(context) {
// Draw the tree canopy
context.beginPath();</p> <p>context.moveTo(⑵5, ⑸0);
context.lineTo(⑴0, ⑻0);
context.lineTo(⑵0, ⑻0);
context.lineTo(⑸, ⑴10);
context.lineTo(⑴5, ⑴10);</p> <p>// 树的端点
context.lineTo(0, ⑴40);</p> <p>context.lineTo(15, ⑴10);
context.lineTo(5, ⑴10);
context.lineTo(20, ⑻0);
context.lineTo(10, ⑻0);
context.lineTo(25, ⑸0);
// 联接起始点,闭合相对路径
context.closePath();
}</p> <p>function drawTrails() {
var canvas = document.getElementById('diagonal');
var context = canvas.getContext('2d');</p> <p>context.save();
context.translate(130, 250);</p> <p>// 建立主要表现树冠的相对路径
createCanopyPath(context);</p> <p>// 绘图当今相对路径
context.stroke();
context.restore();
}</p> <p>window.addEventListener("load", drawTrails, true);

描边款式

根据描边方式,可让树冠看起来更为真正。


拷贝编码
编码以下:

//加宽线条
context.lineWidth = 4;
//光滑相对路径的接合点
context.lineJoin = 'round';
//色调
context.strokeStyle = '#663300';
// 绘图当今相对路径
context.stroke();

填充款式

context.fillStyle = "#339900"; context.fill();

绘图矩形框

大家给树提升树干

context.fillStyle = '#663300'; context.fillRect(⑸, ⑸0, 10, 50);

绘图曲线图


拷贝编码
编码以下:

context.save();
context.translate(⑴0, 350);
context.beginPath();</p> <p>// 第1条曲线图向右上方弯折
context.moveTo(0, 0);
context.quadraticCurveTo(170, ⑸0, 260, ⑴90);</p> <p>// 向右正下方弯折
context.quadraticCurveTo(310, ⑵50, 410, ⑵50);</p> <p>// Draw the path in a wide brown stroke
context.strokeStyle = '#663300';
context.lineWidth = 20;
context.stroke();</p> <p>// Restore the previous canvas state
context.restore();

在Canvas中插进照片

务必直到照片彻底载入后才可以对其开展实际操作。访问器一般会在网页页面脚本制作实行时多线程载入照片,假如尝试在照片未彻底载入以前就将其展现到canvas上,那末 canvas将不容易显示信息任何照片,因而,非常留意,在展现以前,应保证照片已载入结束。


拷贝编码
编码以下:

// 载入照片
var bark = new Image();
bark.src = "bark.jpg";</p> <p>// 照片载入进行后,再启用制图的涵数
bark.onload = function () {
drawTrails();
}

显示信息照片:

//用情况图案设计填充,做为树干的情况 context.drawImage(bark, ⑸, ⑸0, 10, 50);

渐变色

应用渐变色必须3个流程:

(1)建立渐变色目标

(2)为渐变色目标设定色调,指明过渡方法

(3)在context上为填充款式或描边款式设定渐变色


拷贝编码
编码以下:

// 建立用作树干纹路的3阶水平渐变色
var trunkGradient = context.createLinearGradient(⑸, ⑸0, 5, ⑸0);</p> <p>// 树干的左边边沿是1般水平的棕色
trunkGradient.addColorStop(0, '#663300');</p> <p>// 树干正中间偏左的部位色调要谈1些
trunkGradient.addColorStop(0.4, '#996600');</p> <p>// 右边边沿的色调要深1些
trunkGradient.addColorStop(1, '#552200');</p> <p>// 应用渐变色填充树干
context.fillStyle = trunkGradient;
context.fillRect(⑸, ⑸0, 10, 50);
// 建立竖直渐变色,以用树冠在树干上的投射
var canopyShadow = context.createLinearGradient(0, ⑸0, 0, 0);
// 投射渐变色的起始点是全透明度为50%的黑色
canopyShadow.addColorStop(0, 'rgba(0, 0, 0, 0.5)');
// 方位竖直向下,渐变色在很短的间距内快速渐变色到彻底全透明,这段长度以外
//的树干上沒有投射
canopyShadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.0)');</p> <p>// 在树干上填充投射渐变色
context.fillStyle = canopyShadow;
context.fillRect(⑸, ⑸0, 10, 50);

情况图


拷贝编码
编码以下:

// 载入照片
var gravel = new Image();
gravel.src = "gravel.jpg";
gravel.onload = function () {
drawTrails();
}</p> <p>// 用情况图取代棕色粗线条
context.strokeStyle = context.createPattern(gravel, 'repeat');
context.lineWidth = 20;
context.stroke();

context.createPattern的第2个主要参数是反复性标识,能够在表2⑴选中择适合的值。

平铺方法   实际意义 repeat (默认设置值)照片会在两个方位平铺 repeat-x 横向平铺 repeat-y 纵向平铺 no-repeat 照片只显示信息1次,不平铺

 放缩

放缩涵数context.scale(x,y):x,y各自意味着在x,y两个维度的值。每一个主要参数在canvas显示信息图象的情况下,向其传送在本方位轴上图象要变大(或变小)的量。假如x值为2,就意味着所绘图图象中所有元素会变为两倍宽,假如y值为0。5,绘图出来的图象会变为以前的1半高。


拷贝编码
编码以下:

// 在 X=130, Y=250 处绘图第1棵树
context.save();
context.translate(130, 250);
drawTree(context);
context.restore();</p> <p>// 在 X=260, Y=500 处绘图第2棵树
context.save();
context.translate(260, 500);</p> <p>// 将第2棵树的高宽变大到原先的2倍
context.scale(2, 2);
drawTree(context);
context.restore();

转动

转动图象


拷贝编码
编码以下:

context.save();
//转动角度主要参数以弧度为企业
context.rotate(1.57);
context.drawImage(myImage, 0, 0, 100, 100);</p> <p>context.restore();

1种转换的应用方式


拷贝编码
编码以下:

// 储存当今情况
context.save();</p> <p>// X值伴随着Y值提升而提升,依靠拉伸转换,
// 能够建立1棵用作黑影的歪斜的树
// 运用了转换之后,全部座标都与引流矩阵相乘
context.transform(1, 0,
-0.5, 1,
, 0);</p> <p>// 在Y轴方位,将黑影高宽比变成原先的60%
context.scale(1, 0.6);</p> <p>// 应用全透明度为20%的黑色填充树干
context.fillStyle = 'rgba(0, 0, 0, 0.2)';
context.fillRect(⑸, ⑸0, 10, 50);</p> <p>// 应用已有的黑影实际效果再次绘图树
createCanopyPath(context);
context.fill();</p> <p>// 修复以前的canvas情况
context.restore();

文字

context.fillText(text,x,y,maxwidth):text文字內容,x,y特定文字部位,maxwidth是可选主要参数,限定文字部位。
context.strokeText(text,x,y,maxwidth):text文字內容,x,y特定文字部位,maxwidth是可选主要参数,限定文字部位。


拷贝编码
编码以下:

// 在canvas上绘图文字
context.save();</p> <p>// 字号为60,字体样式为Impact
context.font = "60px impact";</p> <p>//填充色调
context.fillStyle = '#996600';
//垂直居中
context.textAlign = 'center';</p> <p>//绘图文字
context.fillText('Happy Trails!', 200, 60, 400);
context.restore();

黑影

 能够根据几种全局性context特性来操纵黑影

特性  值  备注 shadowColor  任何CSS中的色调值 可使用全透明度(alpha) shadowOffsetX 像素值  值为正数,向右挪动黑影;为负数,向左挪动黑影 shadowOffsetY 像素值 值为正数,向下挪动黑影;为负数,向上挪动黑影 shadowBlur 高斯模糊不清值 值越大,黑影边沿越模糊不清


拷贝编码
编码以下:

// 色调黑色,20%全透明度
context.shadowColor = 'rgba(0, 0, 0, 0.2)';</p> <p>// 向右挪动15px,向左挪动10px
context.shadowOffsetX = 15;
context.shadowOffsetY = ⑴0;</p> <p>// 轻度模糊不清黑影
context.shadowBlur = 2;

像素数据信息

 context.getImageData(sx, sy, sw, sh):sx,xy明确1个点,sw:宽度,sh:高宽比。

这个涵数回到3个特性:width 每行有是多少个像素  height 每列有是多少个像素

                                 data 1堆数字能量数组,存有从canvas获得的每一个像素的RGBA值(值红、绿、蓝和全透明度)。

context.putImageData(imagedata,dx,dy):容许开发设计人员传入1组图象数据信息,dx,dy用来特定偏位量,假如应用,则该涵数就会跳到特定的canvas部位去升级

显示信息传进来的像素数据信息。

canvas.toDataUrl:能够根据程序编写获得canvas上当受骗前展现的数据信息,得到的数据信息以文字文件格式储存,访问器能将其分析成图象。

 

上一篇:html5文本黑影实际效果text 返回下一篇:没有了