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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
<style>
* {
padding: 0;
margin: 0
}
body {
width: 100%;
overflow: hidden;
background: #161719;
-moz-user-select: none;
color: #fff;
font-family: 微软雅黑
}
</style>
</head>
<body>
<a href="javascript:No()" style=" float:left; background:#F99; border-radius:3px; line-height:30px; height:30px; color:#000; padding:0 10px; font-weight:bold; text-decoration:none">开关</a>
<canvas width="1400" height="500" id="mycanvas"></canvas>
<div id='print'></div>
</body>
</html>
实例一效果
alt canvas_ball
实例二
html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>闪动的CANVAS</title>
<style type="text/css">
body {
background: #ffffff
}
.btn {
display: inline-block;
background-color: #04d2d0;
padding: 0 5px;
line-height: 22px;
margin: 5px;
text-decoration: none;
font-size: 12px;
color: #fff;
border-radius: 3px;
font-weight: bold;
}
</style>
</head>
<body>
<a href="javascript:s.showPix(true)" class="btn btn1">圆形马赛克</a><a href="javascript:s.showPix(false)" class="btn btn2">“透明”字</a><a href="javascript:s.imageFn()" class="btn btn3">闪烁</a>
<canvas id="myCanvas" width="1400" height="840" style="display: block;"></canvas>
</body>
</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<s.balls.length;i++){
s.balls[i].gogogo();
}
},1000/15);
}
s.imageFn=function(){
context.clearRect(0,0,s.width,s.height);//清空图片
for(var r=0;r<s.rows;r++){ //一行行绘制
for(var c=0;c<s.cols;c++){
var x=(c*s.wid)+(s.wid/2);
var y=(r*s.hei)+(s.hei/2);
var pos=(Math.floor(y)*(s.imageData.width*4))+(Math.floor(x)*4);
if(s.pixels[pos]<85){
var cc=s.pixels[pos];
var ballsingle=new ball({x:x,y:y,c:cc});
s.balls.push(ballsingle);
}
}
}
s.interval();
}
s.showPix=function(br){
clearInterval(s.intervalFn);
context.clearRect(0,0,s.width,s.height);
for(var r=0;r<s.rows;r++){
for(var c=0;c<s.cols;c++){
var x=(c*s.wid)+(s.wid/2);
var y=(r*s.hei)+(s.hei/2);
var pos=(Math.floor(y)*(s.imageData.width*4))+(Math.floor(x)*4);
context.beginPath();
if(br){
context.beginPath();
context.arc(x,y,s.r,0,2*Math.PI,false);
context.fillStyle='rgb('+s.pixels[pos]+','+s.pixels[pos+1]+','+s.pixels[pos+2]+')';
context.fill();
}else{
if(s.pixels[pos]<85){
context.beginPath();
context.arc(x,y,s.r,0,2*Math.PI,false);
context.fillStyle='rgb('+s.pixels[pos]+','+s.pixels[pos+1]+','+s.pixels[pos+2]+')';
context.fill();
}
}
}
}
}
//图片加载
imgMap.onload=function(){
context.drawImage(imgMap,0,0,s.width,s.height);
s.r=(s.height/s.cols)*0.6;
s.imageData=context.getImageData(0,0,s.width,s.height);//图片信息
s.pixels=s.imageData.data;//写入图片后获取图片的rgba信息
s.wid=s.imageData.width/s.cols;
s.hei=s.imageData.height/s.rows;
}
imgMap.src="test4.jpg";
效果图
alt 马赛克化
alt 透明化
alt 闪烁
参考文档：
腾讯next学堂
网友评论