怎么程序设计HTML5 Canvas API
导读:本文共5928.5字符,通常情况下阅读需要20分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 代码如下:<script type="text/javascript">try{document.createElement("Canvas").getContext("2d");document.getElementById("support").innerHTML =... ...
目录
(为您整理了一些要点),点击可以直达。代码如下:
<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();
变换
可以通过变换(缩放、平移、旋转)等达到和上面相同的效果。
用变换的方式绘制对角线
代码如下:
路径
HTML5 Canvas API中的路径代表你希望呈现的任何形状。
beginPath():不论开始绘制何种图形,第一个需要调用的就是beginPath。这个简单的函数不带任何参数,它用来通知canvas将要开始绘制一个新的图形了。
moveTo(x,y):不绘制,将当前位置移动到新的目标坐标(x,y)。
lineTo(x,y):不仅将当前位置移动到新的目标坐标(x,y),而且在两个坐标之间画一条直线。
closePath():这个函数行为和lineTo很像,唯一的差别在于closePath会将路径的起始坐标自动作为目标坐标。它还会通知canvas当前绘制的图形已经闭合或者形成了完全封闭区域,这对将来的填充和描边都非常有用。
绘制一个松树地树冠
代码如下:
描边样式
通过描边模式,可以让树冠看起来更加真实。
代码如下:
//加宽线条
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);
绘制曲线
代码如下:
在Canvas中插入图片
必须等到图片完全加载后才能对其进行操作。浏览器通常会在页面脚本执行时异步加载图片,如果试图在图片未完全加载之前就将其呈现到canvas上,那么 canvas将不会显示任何图片,因此,特别注意,在呈现之前,应确保图片已加载完毕。
代码如下:
显示图片:
//用背景图案填充,作为树干的背景 context.drawImage(bark, -5, -50, 10, 50);
渐变
使用渐变需要三个步骤:
(1)创建渐变对象
(2)为渐变对象设置颜色,指明过渡方式
(3)在context上为填充样式或者描边样式设置渐变
代码如下:
背景图
代码如下:
context.createPattern的第二个参数是重复性标记,可以在表2-1中选择合适的值。
缩放
缩放函数context.scale(x,y):x,y分别代表在x,y两个维度的值。每个参数在canvas显示图像的时候,向其传递在本方向轴上图像要放大(或缩小)的量。如果x值为2,就代表所绘制图像中全部元素会变成两倍宽,如果y值为0。5,绘制出来的图像会变成之前的一半高。
代码如下:
旋转
旋转图像
代码如下:
一种变换的使用方法
代码如下:
文本
context.fillText(text,x,y,maxwidth):text文本内容,x,y指定文本位置,maxwidth是可选参数,限制文本位置。
context.strokeText(text,x,y,maxwidth):text文本内容,x,y指定文本位置,maxwidth是可选参数,限制文本位置。
代码如下:
阴影
可以通过几种全局context属性来控制阴影
代码如下:
像素数据
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上当前呈现的数据,获得的数据以文本格式保存,浏览器能将其解析成图像。
怎么程序设计HTML5 Canvas API的详细内容,希望对您有所帮助,信息来源于网络。