极限街区下载,助理来也,叶挺后代
<canvas>便签用于绘制图像，图表。不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本javascript来完成实际的绘图任务。既然你要画出你想要的图案，你给有画布啊，总不能在空气中画画啊，所以第一步你要创建一个画布，给画布一个宽高能装下你的画。<canvas width="500" height="500" id="canvas"></canvas>。
canvas开始标签和结束便签可以填充内容，填充的内容是后备信息， 如果浏览器不支持canvas元素，就会显示这个后备信息。因为是js控制，所以在脚本语言获取这个元素。var canvas = document.getelementbyid('canvas');画布创建好了，要在这个画布上绘图，就须取得绘图上下文。而取得绘图上下文的对象引用，需调用getcontext（）方法并传入上下文的名字，传入‘2d’,就可以取得2d上下文对象。在使用canvas之前，首先要检测getcontext（）方法是否存在。这一步非常重要。
我要评论if（canvas.getcontext ){
var context = canvas.getcontext("2d");
context . strokestyle = "red";
context . fillstyle = "blue"
......
}
使用2d绘图上下文提供的方法，可以简单绘制2d图形，比如矩形，弧线，和路径 。2d上下文的坐标开始于canvas元素的左上角，原始坐标是（0,0）。所有坐标值都是基于这个原点计算。
var canvas = document.getelementbyid('canvas');
if (canvas.getcontext) {
var context = canvas.getcontext('2d');
context.fillstyle = 'red'; //绘制红色矩形
context.fillrect(100, 100, 100, 100);
context.fillstyle = 'rgba(0,0,255,0.5)'; //绘制半透明蓝色矩形
context.fillrect(150, 150, 100, 100);
}
clearrect()方法用于清除画布上的矩形区域，本质上，这个方法可以把绘制上下文中的某一矩形区域变透明。
canvas 线段样式
斜街长度：内角与外角的距离，当linejoin是miter时，用于控制斜接部分的长度 miterlimit。如果斜街长度超过miterlimit的值，就会自动变成bevel 实际运算时大于limit * linewidth / 2的值。
pen.linewidth=15; pen.moveto(100,100); pen.lineto(300,100); //图片中最粗的那条线 pen.strokestyle = 'red'; pen.stroke(); pen.linewidth=5; //画笔由15改成5 pen.strokestyle = 'yellow'; //颜色变黄色 pen.lineto(200,200); //接着上面的点画。最末端点垂直坐高垂直于红色的那条 pen.moveto(300,100) //改变起点 pen.lineto(100,150); pen.stroke(); pen.strokestyle = 'black'; pen.linewidth=1; pen.lineto(50,150); pen.lineto(50,450); pen.stroke();
我们发现他们是一个路径的（就想是一个集合），也就是你改变笔的粗细和颜色会整体改变，但是因为画在上面的已经画上面的，并不会凭空消失。
那要怎么让他们不是同一个路径呢？用这个就可以了pen.beginpath(); 开始子路径一个新的集合 就可以设置颜色 和 粗细了 。
pen.closepath()的作用是关闭路径，如果当前的图形不是封闭的，会封闭图形。pen.beginpath()和pen.closepath()不用同时存在。
pen.aracto(x1,y1,x2,y2,r); 从上一点开始绘制一条弧线（圆角）
绘制的弧线与当前点的x1,y1连线，x1,y1和x2，y2连线相切
画一个圆角矩形
pen.moveto(120, 100); pen.arcto(200, 100, 200, 200, 20); pen.arcto(200, 200, 100, 200, 20); pen.arcto(100, 200, 100, 100, 20); pen.arcto(100, 100, 200, 100, 20); pen.stroke();
canvas画贝塞尔曲线
pen.quadraticcurveto(x1, y1, ex, ey); 二次贝塞尔曲线
x1 y1 控制点 ex ey结束点
pen.moveto(100, 100); pen.quadraticcurveto(200, 200, 300, 100); pen.stroke();
pen.moveto(100, 100); pen.beziercurveto(200, 50, 300, 200, 400, 50); pen.stroke();
canvas 绘制文本
绘制文本主要有两个方法，filltext()和stroketext()，这两个方法都接收4个参数 filltext（“文本字符串” ，文字x坐标，y坐标，可选的最大像素），
filltext() 用 fillstyle（）属性绘制文本，stroketext() 用 strokestyle（）属性为文本描边
而且这两个方法都已下列3个属性为基础。
文字基线对齐方式 textbaseline
属性
由于绘制文本比较复杂，特别是需要把文本控制在某一区域中的时候，2d上下文提供了辅助确定文本大小的方法measuretext(),这个方法接收一个参数，及要绘制的文本。返回一个textmetrics对象，对象目前只有一个属性width属性。measuretext()利用font， textalign 和textbaseline的当前值计算指定的文本大小。
假设你想在一个140像素宽的矩形区域绘制文本，下面的代码从100像素的字体开始递减，最终会找到合适的字体大小。
var fontsize = 100;
context.font = fontsize + 'px arial';
while (context.measuretext("hellow world").width > 140) {
fontsize--;
context.font = fontsize + 'px arial';
}
context.fillrect(100, 100, 140, 140);
context.filltext("hellow world", 100, 100);
context.filltext("fontseizeis"+fontsize, 30, 30);
var img = new image();
img.src = "hat.png"; //异步加载图片所以用onload保证加载完成
img.onload = function(){
var bg = pen.createpattern(img, "repeat");
pen.fillstyle=bg;
pen.fillrect(0,0,100,100);
}
重复canvas元素
canvas绘制图像
drawimage() 方法在画布上绘制图像、画布或视频。
drawimage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。
context.drawimage(img,x,y); 在canvas的位置
context.drawimage(img,x,y,width,height); 在画布上定位图像，并规定图像的宽度和高度：
context.drawimage(img,sx,sy,swidth,sheight,x,y,width,height); 前四个设定目标元素的位置和宽高，后四个设定canvas元素定位位置宽和高
canvas渐变
线性渐变
createlineargradient（x1,y1,x2,y2）;线性渐变必须在填充渐变区域里定义渐变，否则没有效果。
把线性渐变保存在一个变量bg里，bg.addcolorstop(numbe（小数），颜色)； 把变量填充fillstyle.
径向渐变
canvas 阴影
shadowcolor shadowoffsetx shadowoffsety shadowblur
canvas剪切
clip() 方法从原始画布中剪切任意形状和尺寸。
提示：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。
canvas 合成（新像素和旧像素的合并方式）
默认source-over 常用source-over destination-over copy
将canvas内容导出 （注意：受同源策略限制，需开启服务器，否则会报错）canvas.todataurl();是canvas自身的方法不是上下文对象。将canvas的内容抽取成一张图片以base64的编码格式，将canvas的内容放入ing元素里
获取canvas像素信息
getimagedata() 方法返回 imagedata 对象，该对象拷贝了画布指定矩形的像素数据。
对于 imagedata 对象中的每个像素，都存在着四方面的信息，即 rgba 值：
getimagedata（x,y,dx,dy）;//受同源策略
您也可以使用 getimagedata() 方法来反转画布上某个图像的每个像素的颜色。
var imgdata=ctx.getimagedata(10,10,50,50);
ctx.putimagedata(imgdata,10,70);
putimagedata(imgdata,x,y,dirtyx,dirtyy,dirtywidth,dirtyheight);
canvas命中检测 ispointpath（x,y）检测是否在区域内 ispointstroke（x,y）检测是否在直线上 返回 true 或 false
还可以检测当前的的像素值，如果为透明，则该点不在路径上
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 （附转换公式）
html5 移动端视频video的android兼容(去除播放控件、全屏)
网友评论