H5 Canvas相关小知识点!

在使用Canvas之前，一定要获取Canvas对象，并设置操作环境:

var canvas = document.getElementById("myCanvas");//目前Canvas的操作环境只有2d，没有3d,或者其他tempContext = canvas.getContext("2d");          

1.将图片绘制到画布上:

var img = new Image();//获取img标签的图片资源img.src = $('#starImg').attr('src');//将图片画到画布上,从0,0点开始，宽度420，高度600。tempContext.drawImage(img, 0, 0, 420,600);

2.设置填充色:

tempContext.fillStyle = "transparent";

3.设置字体样式:

//设置字体样式大小tempContext.font = "small-caps bold 18px STXinwei";

4.绘制字体

//字体内容和位置坐标tempContext.fillText("燕潇洒",108,278);

5.绘制矩形

//起始点的x坐标，y坐标，宽度、高度tempContext.fillRect(yxs.x1, yxs.y1, yxs.xDis, yxs.yDis);

6.添加监听

//事件类型，方法名，canvas.addEventListener("mousedown", doMouseDown, false);

最后一个参数的意义如下:

•true 的触发顺序总是在 false 之前；•如果多个均为 true，则外层的触发先于内层；•如果多个均为 false，则内层的触发先于外层。

7.得到鼠标落下时在Canvas上的坐标

//得到鼠标在canvas上点击的坐标function getPointOnCanvas(canvas, x, y) {//获取canvas元素的边界框，该边界框的坐标是相对于整个窗口的。//然后返回一个对象，该对象的x、y属性分别对应于鼠标在canvas之中的坐标。    var bbox = canvas.getBoundingClientRect();    return {        x: x - bbox.left * (canvas.width / bbox.width),        y: y - bbox.top * (canvas.height / bbox.height)    };}

8.鼠标的onmousedown事件:

//鼠标点击落下function doMouseDown(event) {    var x = event.pageX;    var y = event.pageY;    //事件发生的目标    var canvas = event.target;    //根据第七条获取鼠标点击时在画布上的位置    var loc = getPointOnCanvas(canvas, x, y);}

9.将画布转换成图片

//将画布转换成图片function transCanvasToPic(){   var mycanvas = document.getElementById("myCanvas");   var image = mycanvas.toDataURL("image/jpg");   var w = window.open('about:blank', 'image from canvas');   w.document.write("<img src='" + image + "' alt='from canvas'/>");}

10.下载图片

function saveAsLocalImage() {    var myCanvas = document.getElementById("myCanvas");    var image = myCanvas.toDataURL("image/jpg").replace("image/jpg", "image/octet-stream");    window.location.href = image;            }

11.声明一个对象

var Point = {    "name":"xxx",    "sex" :"女",    "age" :12,    Company:{       employee:"工程师",       salary:100000     }};最后一个属性后面没有标点!

12.接收方法返回的多个属性数据:

function getYxs(){    return {        x1:124,        xDis:175,        y1:400,        yDis:146    };}接收:var yxs = getYxs();然后直接通过  "变量.属性"  调用如:yxs.x1;

13:stroke和fill

调用stroke时，是画出边框线条,调用fill是填充整个区域通过调用fillStyle = "red/#ffffff"设置填充颜色通过调用strokeStyle = "red/#ffffff"；设置线条显色

14.beginPath方法。

通过调用beginPath();进行新的图形的绘制

先到这里吧，今天用到的也就这些了，其他的有些还不清楚。