欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

措施计划HTML5 Canvas API

发布时间:2016-11-29  编辑:杨雨个人博客网站   点击:   



代码如下:
<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");
//用绝对坐标来建设一条路径
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, -70);
context.stroke();</p> <p>context.restore();

路径

HTML5 Canvas API中的路径代表你但愿泛起的任何外形。

beginPath():岂论开始绘制何种图形,第一个必要挪用的就是beginPath。这个简朴的函数不带任何参数,它用来关照canvas将要开始绘制一个新的图形了。

moveTo(x,y):不绘制,将当前位置移动到新的方针坐标(x,y)。

lineTo(x,y):不只将当前位置移动到新的方针坐标(x,y),并且在两个坐标之间画一条直线。

closePath():这个函数举动和lineTo很像,独一的不同在于closePath会将路径的起始坐标自举措为方针坐标。它还会关照canvas当前绘制的图形已经闭合可能形成了完全关闭地区,这对未来的添补和描边都很是有效。

绘制一个松树地树冠



代码如下:
function createCanopyPath(context) {
// Draw the tree canopy
context.beginPath();</p> <p>context.moveTo(-25, -50);
context.lineTo(-10, -80);
context.lineTo(-20, -80);
context.lineTo(-5, -110);
context.lineTo(-15, -110);</p> <p>// 树的极点
context.lineTo(0, -140);</p> <p>context.lineTo(15, -110);
context.lineTo(5, -110);
context.lineTo(20, -80);
context.lineTo(10, -80);
context.lineTo(25, -50);
// 毗连出发点,闭合路径
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(-5, -50, 10, 50);

绘制曲线



代码如下:
context.save();
context.translate(-10, 350);
context.beginPath();</p> <p>// 第一条曲线向右上方弯曲
context.moveTo(0, 0);
context.quadraticCurveTo(170, -50, 260, -190);</p> <p>// 向右下方弯曲
context.quadraticCurveTo(310, -250, 410, -250);</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, -5, -50, 10, 50);

渐变

行使渐变必要三个步调:

(1)建设渐变工具

(2)为渐变工具配置颜色,指明过渡方法

(3)在context上为添补样式可能描边样式配置渐变



代码如下:
// 建设用作树干纹理的三阶程度渐变
var trunkGradient = context.createLinearGradient(-5, -50, 5, -50);</p> <p>// 树干的左侧边沿是一样平常水平的棕色
trunkGradient.addColorStop(0, '#663300');</p> <p>// 树干中间偏左的位置颜色要谈一些
trunkGradient.addColorStop(0.4, '#996600');</p> <p>// 右侧边沿的颜色要深一些
trunkGradient.addColorStop(1, '#552200');</p> <p>// 行使渐变添补树干
context.fillStyle = trunkGradient;
context.fillRect(-5, -50, 10, 50);
// 建设垂直渐变,以用树冠在树干上的投影
var canopyShadow = context.createLinearGradient(0, -50, 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(-5, -50, 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-1中选择吻合的值。

平铺方法   意义
repeat (默认值)图片会在两个偏向平铺
repeat-x 横向平铺
repeat-y 纵向平铺
no-repeat 图片只表现一次,不服铺

 缩放

缩放函数context.scale(x,y):x,y别离代表在x,y两个维度的值。每个参数在canvas表现图像的时辰,向其转达在本偏向轴上图像要放大(或缩小)的量。假如x值为2,就代表所绘制图像中所有元素会酿成两倍宽,假如y值为0。5,绘制出来的图像会酿成之前的一半高。



代码如下:
// 在 X=130, Y=250 处绘制第一棵树
context.save();
context.translate(130, 250);
drawTree(context);
context.restore();</p> <p>// 在 X=260, Y=500 处绘制第二棵树
context.save();
context.translate(260, 500);</p> <p>// 将第二棵树的高宽放大到原本的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();

一种调动的行使要领



代码如下:
// 生涯当前状态
context.save();</p> <p>// X值跟着Y值增进而增进,借助拉伸调动,
// 可以建设一棵用作阴影的倾斜的树
// 应用了调动往后,全部坐标都与矩阵相乘
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(-5, -50, 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 = -10;</p> <p>// 稍微恍惚阴影
context.shadowBlur = 2;

像素数据

 context.getImageData(sx, sy, sw, sh):sx,xy确定一个点,sw:宽度,sh:高度。

这个函数返回三个属性:width 每行有几多个像素  height 每列有几多个像素

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

context.putImageData(imagedata,dx,dy):应承开拓职员传入一组图像数据,dx,dy用来指定偏移量,假如行使,则该函数就会跳到指定的canvas位置去更新

表现传进来的像素数据。

canvas.toDataUrl:可以通过编程获取canvas被骗前泛起的数据,得到的数据以文本名目生涯,赏识器能将其理会成图像。

 

本文地址:http://itbyc.com/web/html5/13799.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1