html5笔记2 canvas

来源：互联网发布：淘宝扣48分会怎么样编辑：程序博客网时间：2024/05/15 07:25

1、SVG - 可伸缩矢量图形
。svg是在html5 canvas出现之前的一种很好的替代方案
。用于定义用于网络的基于矢量的图形
。svg在改变尺寸的情况下图形质量不会有损失，并且支持点击检测
。svg通过XML文件来描述图形的

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">   <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/></svg>

html文档通过标签加入svg文件：<embed>、<object>、<iframe>

<embed src="rect.svg" width="300" height="100" type="image/svg+xml"     pluginspage="http://www.adobe.com/svg/viewer/install/" />  -- pluginspage指向下载插件的URL<object data="rect.svg" width="300" height="100" type="image/svg+xml"    codebase="http://www.adobe.com/svg/viewer/install/" /><iframe src="rect.svg" width="300" height="100"></iframe>-- 直接在html中写入，通过引用SVG的命名空间就能把SVG元素添加html中<html xmlns:svg="http://www.w3.org/2000/svg">  <body>    <p>This is an HTML paragraph</p>    <svg:svg width="300" height="100" version="1.1" >      <svg:circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />    </svg:svg>  </body></html>

2、canvas - 位图画布
canvas依赖分辨率的显示，不支持事件处理器（就是图像没有事件功能），不能伸缩图像。
canvas使用方法：首先获取画布的上下文，然后在上下文中执行动作，最后将动作应用到上下文中。

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">   Your browser does not support the canvas element.</canvas>

这里提供了在不支持canvas时候替代显示的内容。

3、检测浏览器是否支持

function check(){    try{       document.getElementById("heatmap").getContext('2d');       document.getElementById("support").innerHTML = "Your browser supports HTML5 Canvas!";    } catch(e){       document.getElementById("support").innerHTML = "Your browser not supports HTML5 Canvas!";    }}window.onload = check;

4、canvas 的使用

function drawDiagonal() {    // Get the canvas element and its drawing context    var canvas = document.getElementById('diagonal');    var context = canvas.getContext('2d');    // Create a path in absolute coordinates    context.beginPath();    context.moveTo(70, 140);    context.lineTo(140, 70);    // Stroke the line onto the canvas    context.stroke();}window.addEventListener("load", drawDiagonal, true);

beginPath()：其实一条路径，或重置当前路径
closePath()：创建从当前点回到起始点的路径
moveTo()：把路径移动到指定点，不创建线条
lineTo()：添加一个新点，然后再画布中创建从该点到最后指点的路径
stroke()：绘制已定义的路径
fill()：填充当前绘图

变换：
translate()：设置画图的原点，就是在原来的原点上偏移后的位置的坐标原点。
save()：保存当前尚未修改的context，这样可以保证在进行了变换后，还是可以恢复到初始状态的，这样就不会影响到后面的操作。
restore()：将上下文环境恢复到原始状态（就是上面保存过的状态），开始后续的操作。

描边样式（线条）：
lineWidth：设置或返回当前线条宽度
lineJoin：设置会返回两条线相交时，所创建的拐角类型 —> context.lineJoin="bevel|round|miter";
lineCap：设置或返回线条结束端点的样式 —> context.lineCap="butt|round|square";
miterLimit：设置或返回最大斜接长度（这个只有在lineJoin为miter时才有效，如果斜接长度超过了miterLimit，边角会以lineJoin的bevel类型显示）
strokeStyle：设置或返回用于笔触的颜色、渐变或模式
值描述color指示绘图笔触颜色的 CSS 颜色值。默认值是 #000000。gradient用于填充绘图的渐变对象（线性或放射性）pattern用于创建 pattern 笔触的 pattern 对象createLinearGradient()：创建线性渐变（四个参数，指定开始x,y和结束x,y）
createRadialGradient()：创建放射性/环形的渐变（是两个圆，指定坐标原点和半径）
createPattern()：在指定的方向上重复指定的元素（元素可以是任何可以在页面上绘制的东东），模式有：repeat、repeat-x、repaeat-y和no-repeat
addColorStop()：规定渐变对象的颜色和停止位置
参数描述stop介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。color在结束位置显示的 CSS 颜色值

0表示在整个绘图的开始，1表示绘图完成。

填充样式：
fillStyle：设置或返回用于填充绘图的颜色、渐变或模式
填充可以再描绘路径之前进行，它会直接作用到有区域图形上。它的作用域在benginPath()结束的部分。

矩形区域及填充：
rect()：创建矩形（这个不实际绘制，需要使用stroke()或fill()方法实际的绘制矩阵）
fillRect()：绘制被填充矩形
strokeRect()：绘制图形（无填充）
clearRect()：在给定的矩形内消除指定的象素

绘制曲线：
quadraticCurveTo()：创建二次贝塞尔曲线。绘制曲线的起点是当前坐标，带有两组坐标，分别是控制点和终点。调整控制点的位置，可以改变曲线的曲率。
bezierCurveTo()：创建三次贝塞尔曲线。绘制曲线的起点是当前坐标，带有三组坐标，分别是控制点1、控制点2和终点
arc()：创建弧/曲线（用于创建圆形或部分圆） —> ctx.arc(100,75,50,0,2*Math.PI);（画一个圆）
arcTo()：创建两切线之间的弧/曲线（即以弧来连接两条直线）

插入图片：
drawImage()：在画布上绘制图像、画布或视频。
两种方式来加载：
没有用外部插件的实现方式：

<img src="/i/eg_tulip.jpg" alt="tulip" id="tulip" style="margin-left:0px;" />document.getElementById("tulip").onload=function(){  var c=document.getElementById("myCanvas");  var ctx=c.getContext("2d");  var img=document.getElementById("tulip");  ctx.drawImage(img,90,130,90,80);};

通过Image方法：

var bark = new Image();bark.src = "bark.jpg";bark.onload = function () {   context.drawImage(bark, -5, -50, 10, 50);}

上面实现的方法都是必须在图片完全加载之后才能在画布上进行画图；否则，canvas将不会显示任何图片。所以在呈现前，必须确保图片已经加载完毕。

缩放与旋转：
scale()：缩放当前会图更大或更小。参数分别为width、height。
rotate()：旋转当前绘图。

文本：
操作文本的方式与操作其它路径对象的方式相同，可以描绘文本轮廓和填充文本内部，同时，所有能够应用于其它图形的变换和样式都能用于文本。
fillText()：在画布上绘制被填充的文本
strokeText()：在画布上绘制空心的文本
measureText()：返回包含指定的文本的对象
属性描述font设置或返回文本内容的当前字体属性textAlign设置或返回文本内容的当前对齐方式textBaseline设置或返回在绘制文本时使用的当前文本基线

5、像素数据
html5允许开发人员直接访问canvas底层像素数据。一方面可以以数值数组形式获取像素数据；另一方面，可以修改数组的值以将其作用到画布上。

context.getImageData()：返回当前canvas状态并以数值数组的方式显示。返回的对象包括三个属性：width、height、data（数组，存储着canvas获取的像素的RGBA值）
这个方法有四个参数，值会返回这四个参数所限定的区域内的数据。只有被x、y、width、height四个参数确定的矩形区域内的canvas上的像素才能被取到，要取到所有像素数据，可以像这样：getImageData(0,0,canvas.width,canvas,height)

context.putImageData()：允许传入一组图像数据，格式是与从canvas上获取的是一样的。可以直接先从canvas上获取数据加以修改后再作用在此函数调用。

context.createImageData()：预先生成一组空的canvas数据，并绑定在canvas对象上。

//以指定的尺寸（以像素计）创建新的 ImageData 对象var imgData=context.createImageData(width,height);// 创建与指定的另一个 ImageData 对象尺寸相同的新 ImageData 对象（不会复制图像数据）var imgData=context.createImageData(imageData);//实例var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");var imgData=ctx.createImageData(100,100);// imgData.data.length就是上面指定的width*height// 涂色是按每个像素进行的，在width*height这样的面板上就有width*height个像素for (var i=0;i<imgData.data.length;i+=4){  imgData.data[i+0]=255;  imgData.data[i+1]=0;  imgData.data[i+2]=0;  imgData.data[i+3]=255;}ctx.putImageData(imgData,10,10);

6、由像素数据引发的canvas的安全机制
origin-clean canvas：如果canvas中的图片不是来自包含它的页面所在的域，那么页面中的脚本就不能取得图片中的数据。
这是种隐私保护措施，如果允许脚本读取本地以外的图像或图像数据，那么对于敏感的在线图片文档将被无限制的共享。
在调用getImageData函数时，会检查图像所在的域，如果canvas中的图像来自于其他的域，则会抛出安全异常。