canvas小练习

canvas语法

canvas本身是一个没有自己行为的画布，绘制需要依靠canvas的getContext('2d')属性，翻译为“上下文”,Canvas的绘图API都是绑定在getContext('2d')这个属性上,getContext('2d')目前只接受2d这个参数，相关的绘图API都是2D的：圆、矩形、曲线等等

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath(); //下达指令开始路径了
ctx.arc(150,150,100,0,2*Math.PI,false); //开始路径
ctx.moveTo(150,150);  //移到坐标(150,150)位置
ctx.lineTo(250,250);  //画直线到(250,250)位置
ctx.closePath();   //下达指令，结束路径了，此时画布上不会出现任何画面，如果是fill()不用closePath()
ctx.stroke(); //描边，嗯，看的到了

var img=new image();
ctx.drawImage(img,width,height);（不能跨域）
img.src="test.jpg";
ctx.getImageData(0,0,canvas.width,canvas.height);//图片信息

实例1

js

var mycanvas = document.getElementById('mycanvas');
var ctx = mycanvas.getContext('2d');
var balls = [],
    br = false,
    maxH = 450,
    maxW = 600;
var addBall = function() {
    var obj = {
        //x轴的坐标
        x: 0,
        // y轴的坐标
        y: Math.ceil(Math.random() * 400),
        // x轴的速度
        vx: 6 + Math.ceil(Math.random() * 6),
        // y轴的速度
        vy: -Math.ceil(Math.random() * 20),
        // 竖直方向的加速度
        g: 1,
        // 遇到右边墙是否反方向返回
        xback: br
    }
    balls.push(obj);
}
mycanvas.onclick = function() { addBall() }
var No = function() {
    br = !br;
    for (var i = 0; i < balls.length; i++) {
        balls[i].xback = br;
    }
}
var draw = function() {
    ctx.clearRect(0, 0, mycanvas.width, mycanvas.height);
    for (var i = 0; i < balls.length; i++) {
        ctx.beginPath();
        ctx.arc(balls[i].x, balls[i].y, 10, 0, Math.PI * 2, false);
        ctx.fillStyle = "rgb(39,232,255)";
        ctx.fill();
    }
}
var updateCanvas = function() {
    for (var i = 0; i < balls.length; i++) {
        balls[i].x += balls[i].vx;
        balls[i].y += balls[i].vy;
        balls[i].vy += balls[i].g;
        if (balls[i].y > maxH) {
            balls[i].vy = -balls[i].vy * 0.7;
            balls[i].y = maxH;
        }
        if (balls[i].xback && balls[i].x > maxW) {
            balls[i].x = maxW;
            balls[i].vx = -balls[i].vx;
        }
    }
}
var deleteBall = function() {
    for (var i = 0; i < balls.length; i++) {
        if (balls[i].x < -100 || balls[i].x > 600) {
            balls.splice(i, 1);
        }
    }
    document.getElementById('print').innerHTML = "还剩小球数量===" + balls.length;
}

var gogogo = function() {
    draw();
    updateCanvas();
    deleteBall();
}
setInterval(gogogo, 1000 / 60);

html

开关

实例一效果

alt canvas_ball

实例二

html

    
    
    



    圆形马赛克“透明”字闪烁
    
    

js

var canvas=document.getElementById('myCanvas');
var context=canvas.getContext('2d');
var imgMap=new Image();
var showPix;
var ball=function(obj){
    this.pos0={
        x:obj.x,
        y:obj.y,
        c:obj.c
    }
    console.log(this.pos0.c);
    this.posE={}
    this.append();
}
ball.prototype.append=function(){
    this.posE.x=this.pos0.x+Math.random()*15;//这个点随机出现的位置的x轴坐标
    this.posE.y=this.pos0.y+Math.random()*15;//这个点随机出现的位置的y轴坐标
    this.alpha=Math.random()*0.5+0.5; //这个点初始化的透明度
    this.aSpeed=0.02+Math.random()/50; //这个点初始化的透明度的速度
    this.r=0;  
    this.rSpeed=Math.random()*0.3;
}
ball.prototype.update=function(){
    if(this.alpha<0) this.append();
    this.r+=this.rSpeed;
    this.alpha-=this.aSpeed;
}
ball.prototype.draw=function(p){
    var _this=this;
    context.beginPath();
    context.arc(_this.posE.x,_this.posE.y,_this.r,0,2*Math.PI,false);
    context.fillStyle='rgba(233,84,86,'+_this.alpha+')';
    context.fill();
}
ball.prototype.gogogo=function(){
    this.update();
    this.draw();
}
//功能区
var s={
    width:1400, //地图的宽
    height:840, //地图的高
    rows:280, //竖着几行
    cols:350, //横着每列
    balls:[]  //放置点点
}
s.interval=function(){
    s.intervalFn=setInterval(function(){
        context.clearRect(0,0,canvas.width,canvas.height);
        for(var i=0;i

素材地址

效果图

alt 马赛克化

alt 透明化

alt 闪烁

参考文档：

腾讯next学堂

canvas api

浏览器中效果