fillText(text，x,y,maxWidth)：text表示文字，x，y为坐标，maxWidth可选，为文字最大宽度，防止文字溢出，填充文字
strokeText(text,x,y,maxWidth)：text表示文字，x，y为坐标，maxWidth可选，为文字最大宽度，防止文字溢出，绘制文字

save（） restore（） ① 绘制复杂图形必不可少的方法,分别用来保存、恢复canvas的状态，无参数 ② sava用于保存canvas状态,save之后,可以调用canvas的平移,缩放,旋转，裁切之类的操作 ③ restore用于恢复canvas之前的保存状态，防止save后的操作对后续绘制造成影响 ④ sava和restore配对使用，restore的次数小于等于save

阴影属性：

shadowColor：设置阴影颜色

shadowBlur：设置阴影模糊级别

shadowOffsetX：设置阴影在x轴上距离图形的距离

shadowOffsetY：设置阴影在y轴上距离图形的距离

canvas绘制图像 视频 drawImage(img,x,y,width,height) 或者是 drawImage(img,x,y)

【1】 HTML结构：

JS结构

context.beginPath();
context.drawImage(img,60,60,50,50); // drawImage(img,x,y,width,height)
context.closePath();

【2】
<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var img=new Image(); img.src="flower.png"; cxt.drawImage(img,0,0); </script>

图像的平铺

context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");

img：图片

type： repeat整个画布平铺

repeat-x在x轴方向上平铺

repeat-y在y轴方向上平铺

no-repeat不平铺 ------------------------------- var imageObj = new Image();
imageObj.src = "http://www.2cto.com/uploadfile/2014/0612/20140612111655720.png";

var pattern = context.createPattern(imageObj, "repeat");
context.rect(10, 10, cavas.width - 20, cavas.height - 20);
context.fillStyle = pattern;
context.fill();

drawImage() 方法在画布上绘制图像、画布或视频。

drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。

JavaScript 语法 1

在画布上定位图像：

context.drawImage(img,x,y); JavaScript 语法 2

在画布上定位图像，并规定图像的宽度和高度：

context.drawImage(img,x,y,width,height); JavaScript 语法 3

剪切图像，并在画布上定位被剪切的部分：

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

canvas绘制视频

<script>
var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
ctx=c.getContext('2d');

v.addEventListener('play', function() {var i=window.setInterval(function() {ctx.drawImage(v,0,0,270,135)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);
</script>

Cavans 渐变

<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var grd=cxt.createLinearGradient(0,0,175,50); grd.addColorStop(0,"#FF0000"); grd.addColorStop(1,"#00FF00"); cxt.fillStyle=grd; cxt.fillRect(0,0,175,50); </script>

点击复制链接 与好友分享!回本站首页 上一篇：HTML学习笔记——各种居中对齐 下一篇：用Phaser来制作一个html5游戏——flappy bird （一） 相关文章

HTML5地理定位，百度地图API，知识点熟

HTML5学习笔记简明版（1）：HTML5介绍

HTML5学习笔记简明版（2）：新元素之s

HTML5学习笔记简明版（3）：新元素之h

HTML5学习笔记简明版（4）：新元素之v

HTML5+CSS3学习笔记（一） 概述

HTML5+CSS3学习笔记（二） 页面布局：

HTML5移动开发学习笔记之Canvas基础

HTML学习笔记——各种居中对齐

APPCAN学习笔记003---原生开发与HTML5

图文推荐