Canvas--位图

2017-07-13 本文已影响0人 LorenaLu

canvas 是HTML5中新增的一个标签（video），绘制操作通过Javascript完成。
Svg 矢量图符合xml标签节点
1、获取画布
var canvas = document.querySelector("#canvas");
2、获取绘画环境，参数必须传入2d
var ctx = canvas.getContext("2d");
moveTo(x,y)设置绘制线段起点（用于表示开始一条新线的位置）
lineTo(x,y)绘制线段到指定点，如果是第一条线可以不使用moveTo ,而直接LineTo，否则建议一律使用moveTo
stroke()描边（绘制）
lineWidth设置线宽 ctx.lineWidth = 10;
strokeStyle 设置描边样式接收所有颜色类型 red #eee rgb rgba(188,188,188,.5) HSL
lineJoin设置线段交汇处样式接收 bevel斜角 round圆角 miter尖角默认
lineCap设置线帽（只在端点处有效） butt无，默认。round圆帽 square方帽
closePath闭合路径将当前正在绘制的路径闭合
fill() 填充(如果没有分隔开，会产生闭合)
fillStyle设置填充样式同strokeStyle
beginPath()开始一条新路径的绘制与closePath 没有一点关系

rect

fillRect(x,y,w,h) 填充矩形
strokeRect 描边矩形

绘制正方形的三种方法

1、ctx.beginPath();
ctx.fillStyle = "#ccc"
ctx.fillRect(x,y,w,h)
2、ctx.beginPath();
ctx.fillStyle = "#ccc"
ctx.strokeRect(x,y,w.h)
3、ctx.beginPath();
ctx.rect(x,y.w.h);
ctx.fill();

动画效果制作（刮奖）

游戏界面每次都会清掉整块画布，然后绘制下一帧动作
clearRect(0,0,canvas.width,canvas.height)
clearRect(x,y,w,h) 擦除指定的区域
rect(x,y,w,h) 定义矩形路径

绘制圆

通过绘制圆弧来画圆
arc(cx,cy,radius,startRadian ,endRadian[,是否逆时针]) 绘制圆弧
cx | cy 圆心坐标
radius 半径
startRadian | endRadian 开始 | 结束弧度
例ctx.arc(250,250,100,0,Math.PI/2,true)
Math.PI/180 * 60 画一个六十度的弧

文字

fillText(string,x,y)填充文字
strokeText(string,x,y) 描边文字
文字属性
font设置字体样式
textAlign设置文字水平对齐方式
textBaseline设置文字垂直对齐方式

![Uploading 图片_690680.png . . .]

数据可视化开发:饼图

绘制图片

要求图片必须在加载完成之后

var img = new Image();
    img.src = "./girl.png";
    //图片下载完毕
    img.onload = function(){
        console.log("success");
        ctx.drawImage(this,100,0);
    }

drawImage(img,x,y) 图片有多大就绘多大，超出画布大小不会制
drawImage(img,x,y,iw,ih) 将图片绘制到指定大小内，会压缩或拉伸图片
drawImage(img,ix,iy,iw,ih,cx,cy,cw.ch) 由前四个参数决定从原图上指定位置剪下指定大小的图；绘制到指定位置的画布上的指定大小，会压缩或拉伸图片

像素

getImageData(x,y,w,h)获取指定范围内的像素信息
putImageData(imgData,x,y)向指定范围内绘制像素信息

    img.onload = function(){
        console.log("success");
        ctx.drawImage(this,0,0);
        // ctx.drawImage(this,0,0,200,200)
        // ctx.drawImage(this,150,100,50,50,400,250,50,50)
        var data = ctx.getImageData(0,0,500,500);
        var arr = data.data;
        for(var i = 0 ; i< arr.length;i+=4){
            //取反色？
            // arr[i] = 255-arr[i];
            // arr[i+1] = 255-arr[i+1];
            // arr[i+2] = 255-arr[i+2];
            //灰度
            arr[i] = arr[i+1] = arr[i+2] = (arr[i]+arr[i+1]+arr[i+2])/3
        }
        ctx.putImageData(data,0,0);
    }

video

<video src="./aaa.mp4" autoplay width=600></video>

 var video = document.querySelector("video")
    video.oncanplaythrough = function(){
        //代表视频能够无缓冲播放
        function _run(){
            ctx.drawImage(video,0,0);
            requestAnimationFrame(_run);
        }
        _run();
    }

更改视频颜色

    var canvas = document.querySelector("#canvas");
    //获取绘画环境，参数必须传入2d
    var ctx = canvas.getContext("2d");
    var video = document.querySelector("video")
    video.oncanplaythrough = function () {
        //代表视频能够无缓冲播放
        function _run() {
            ctx.drawImage(video, 0, 0);
            var data = ctx.getImageData(0, 0, 500, 500);
            var arr = data.data;
            for (var i = 0; i < arr.length; i += 4) {
                //反转
                arr[i] = 255-arr[i];
                arr[i+1] = 255-arr[i+1];
                arr[i+2] = 255-arr[i+2];
                //灰度
                // arr[i] = arr[i + 1] = arr[i + 2] = (arr[i] + arr[i + 1] + arr[i + 2]) / 3
            }
            ctx.putImageData(data, 0, 0);
            requestAnimationFrame(_run);
        }
        _run();
    }

pattern样品

createPattern(img,repeatType)创建平铺对象
repeatType平铺类型 repeat-x repeat-y repeat no-repeat

  var img = new Image();
   img.src = "./1.jpg";
   img.onload = function () {
       var pattern = ctx.createPattern(this, "repeat");
       ctx.fillStyle = pattern;
       ctx.fillRect(0,0,200,200);
       ctx.arc(250,250,100,0,Math.PI*2)
       ctx.fill()
   }

clip()裁剪

1、必须有一条封闭的路径
2、路径必须在clip之前创建
3、clip必须在drawImage之前调用

  var img = new Image();
    img.src = "./girl.png";
    //图片下载完毕
    img.onload = function(){
        // console.log("success");
        ctx.arc(200,150,50,0,Math.PI*2);
        ctx.clip();
        ctx.drawImage(this,0,0);
    }

组合

source-over 默认，新图形在上
destination-over
source-in
destination-in
source-out
destination-out
source-atop
destination-atop
lighter
xor
copy
source新图形 destination旧图形
in 交集，out非交集，over代表覆盖 atop重叠部分在上 xor扣掉重合部分 copy 新图形

ctx.fillStyle= "blue";
    ctx.fillRect(100,100,150,150);
    ctx.globalCompositeOperation = "copy";
    ctx.beginPath();
    ctx.arc(250,250,100,0,Math.PI*2)
    ctx.fillStyle= "green";
    ctx.fill()

坐标轴

save
restore
rotate
translate

阴影

ctx.shadowColor = "blue";  阴影颜色
ctx.shadowOffsetX = 50;   水平偏移距离（可负值）
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 10;    模糊距离

ctx.fillRect(200,200,100,50);
ctx.font = "bold 50px 黑体";
ctx.fillText("Hello Canvas",50,300);

贝塞尔

   ctx.moveTo(100, 150)
    ctx.lineTo(300, 50);
    ctx.lineTo(450, 150);
    ctx.stroke();

    ctx.moveTo(100, 400)
    ctx.lineTo(150, 300)
    ctx.lineTo(350, 250);
    ctx.lineTo(450, 400);
    ctx.stroke();

    ctx.moveTo(100, 150)
    ctx.quadraticCurveTo(300, 50, 450, 150)
    ctx.stroke()

    ctx.moveTo(100, 400)
    ctx.bezierCurveTo(150, 300, 350, 250, 450, 400)
    ctx.stroke()

渐变

线性渐变（4个参数）
var lg = ctx.createLinearGradient(0,0,500,500);
径向渐变（6个参数）
var rg = ctx.createRadialGradient(100,250,50,350,250,150);
    rg.addColorStop(0,"red");
    rg.addColorStop(0.5,"yellow");
    rg.addColorStop(1,"blue");
    ctx.fillStyle = rg;
    ctx.fillRect(0,0,500,500);