3.5 渐变
Canvas的渐变有两各路 ,线性或径向。在使用gradient时,注意使用createLinearGradient与createRadiusGradient所创建的fillStyle均只在其指定的矩形/圆环区域内生效,如果要fill的图形处于gradient对象之后,则fill后的区域不会出现预料的渐变效果。
如下代码,演示了如何使用渐变:
window.onload=function(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
//定义纯性渐变
var point1={x:0,y:0},point2={x:100,y:100};
var gradient=context.createLinearGradient(point1.x,point1.y,point2.x,point2.y);
gradient.addColorStop(0,'#ff0000');
gradient.addColorStop(1,'#00ff00');
//使用线性渐变绘制距形
context.fillStyle=gradient;
context.fillRect(0,0,100,100);
context.fillRect(100,0,200,100);
//定义线性渐变
var gradient1=context.createLinearGradient(0,100,200,200);
gradient1.addColorStop(0,'#ff0000');
gradient1.addColorStop(0.5,'#00ff00');
gradient1.addColorStop(1,'#0000ff');
//使用线性渐变绘制距形,注意此处渐变区域
context.fillStyle=gradient1;
context.fillRect(0,100,100,200);
//定义径向渐变
var c1 = {x: 300, y: 300, radius: 0};
var c2 = {x: 300, y: 300, radius: 50};
var gradient2=context.createRadialGradient(c1.x,c1.y,c1.radius,c2.x,c2.y,c2.radius);
gradient2.addColorStop(0,'#ffff00');
gradient2.addColorStop(0.5,'#00ffff');
gradient2.addColorStop(1,'#ff00ff');
//使用径向渐变绘制圆形
context.fillStyle=gradient2;
context.arc(300,300,50,0,Math.PI*2,true);
context.fill();
};
其效果图如下所示:
3.6图片加载
大多数的游戏中的素材都是图片,无论使用单个的图片,还是使用CSS-Sprite方式,都需要将其绘制在Canvas画布上。可以使用动态加载的方式加载图片。
Canvas提供了一些像素级操作图片的方法getImageData,createImageData与pubImageData。对于每一个像素点,都可以由R,G,B,A四个连续的数字组成。于是,一张图片中所有的点就可以由一个数组来描述,这个数组每四个元素表示一个像素点的值。任意一个像素点在数组中的偏移位置为:
var offset = (xpos + ypos * imagedata.width) * 4;
通过对每一个像素的RGBA值的精确处理,可以实现各种效果,如下,实现了一个圣诞节彩喷字体样式的画图板:
window.onload=function(){
//初始化各类参数
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var mouse=utils.captureMouse(canvas);
var imageData=context.getImageData(0,0,canvas.width,canvas.height);
var pixels=imageData.data;
var brush_width=20;
var brush_destiny=50;
var brush_color='#ffffff';
//注册鼠标按下操作:获取随机色
canvas.addEventListener("mousedown",function(){
brush_color = utils.parseColor(Math.random() * 0xffffff, true);
canvas.addEventListener("mousemove",onMouseMove,false);
},false);
//注册鼠标按键松开状态:取消鼠标移动监听事件
canvas.addEventListener("mouseup",function(){
canvas.removeEventListener("mousemove",onMouseMove,false);
},false);
//鼠标移动事件
function onMouseMove(){
for(var i=0;i<brush_destiny;i++){
//以鼠标位置为圆心,取得随机的一个点的坐标(三角函数表示)
var angle=Math.random()*Math.PI*2;
var radius=Math.random()*brush_width;
var positionX=(mouse.x+Math.cos(angle)*radius)|0;
var positionY=(mouse.y+Math.sin(angle)*radius)|0;
//取得当前随机点在整个画面imageData中的偏移,修正当前像素RGBA色为鼠标按下时指定的色彩
var offset=(positionX+positionY*imageData.width)*4;
pixels[offset] = brush_color >> 16 & 0xff; //red
pixels[offset + 1] = brush_color >> 8 & 0xff; //green
pixels[offset + 2] = brush_color & 0xff; //blue
pixels[offset + 3] = 255; //alpha
}
//将修正过的imageData生效到当前画布
context.putImageData(imageData,0,0);
}
};
如下为其效果图:
此处用到一个工具函数来对色彩进行处理
utils.parseColor=function(color,toNumber){
if(toNumber===true){
//将指定的色彩转化为数字值
if(typeof color ==='number'){
return (color | 0);
}
if(typeof color === 'string' && color[0]==='#'){
color=color.slice(1);
}
return window.parseInt(color,16);
}else{
//将输入的数字转换为RGB色彩值
if(typeof color === 'number'){
color='#'+('00000'+(color | 0).toString(16)).substr(-6);
}
return color;
}
};
- 大小: 87.7 KB
- 大小: 266.2 KB
分享到:
相关推荐
canvas拼图游戏,基于html + canvas画布实现
H5 canvas 实现小游戏 H5 canvas 实现小游戏 H5 canvas 实现小游戏 H5 canvas 实现小游戏
HTML5 Canvas 赛车游戏动画DEMO演示 键盘控制车的方向
利用canvas画布,进行撞击,消除操作的小游戏
canvas端午节小游戏
canvas拼图小游戏
html5 开发技术 游戏.很好玩的html5+canvas技术实现的拼图游戏
试验性质的一个微信小程序,用canvas做的一个类似flappy-bird的小游戏。 包含一些基本的功能:躲避障碍物、计分、排行榜等等。后端的工程也一并上传了,在java目录中,很简单的一个SpringMVC工程。 游戏原型见这里。...
通过一个简单的例子,讲解如何在HTML5 canvas中开发游戏,主要是定时器的用法值得大家借鉴
canvas端午节吃粽子小游戏,兼容移动端
canvas 飞机大战小游戏
HTML5 Canvas赛车游戏动画,赛车游戏动画演示。
canvas 实现2d 简单小游戏,点击出现蓝色攻击方块,攻击黑色方块得分,触碰红色方块游戏结束,黑色方块想灭完,游戏等级提升
HTML 5 CANVAS游戏开发实战HTML 5 CANVAS游戏开发实战HTML 5 CANVAS游戏开发实战
canvas-弹珠游戏
HTML 5 CANVAS游戏开发实战
canvas打砖块小游戏
1.open-type=“share”,onShareAppMessage实现分享微信功能。2.canvas绘制分享海报。
HTML5+CANVAS游戏开发实战,很值得学习,就算不是做游戏,但是对js的进阶也很有好处。
canvas版的2048小游戏,canvas版的2048小游戏,canvas版的2048小游戏,canvas版的2048小游戏,canvas版的2048小游戏