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
canvas
开关
实例一效果
alt canvas_ball
实例二
html
闪动的CANVAS
圆形马赛克“透明”字闪烁
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
浏览器中效果