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
分享到:
相关推荐
9. **最佳实践**:分享HTML5 Canvas开发的最佳实践,包括代码组织、调试技巧以及如何确保兼容性。 10. **社区与资源**:可能还会介绍一些HTML5和Canvas的在线社区、工具、库和框架,帮助读者持续学习和提高。 总的...
在这个"HTML5 Canvas核心技术图形、动画与游戏开发"的PDF扫描版中,读者可以深入学习到Canvas的核心概念和实践技巧。 首先,Canvas的基本使用方法是通过JavaScript API来实现的。这个API提供了大量的绘图命令,如`...
HTML5的Canvas是一个强大的绘图API,它允许开发者在网页上进行动态的、基于...随着对Canvas的深入理解和实践,你会发现它的潜力无穷无尽。在实际项目中,可以结合CSS3、WebGL等技术,构建更复杂的交互式Web应用。
在微信小程序中,Canvas是一个非常重要的组件,它允许开发者在...以上就是关于"小程序canvasDemo"项目中涉及的主要技术点,通过学习和实践,你可以掌握微信小程序中canvas的使用技巧,进一步提升你的小程序开发能力。
HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的交互式用户体验。在这个“html5_canvas_...这样的实现不仅方便分享,也为开发者提供了一个学习和实践Canvas API的好平台。
《canvas+js绘制图形的实践探索》 在Web开发领域,HTML5的canvas元素提供了一种强大的机制,允许开发者在浏览器上进行动态图形绘制。这篇博文将深入探讨如何结合JavaScript,利用canvas API来构建一个简单的绘图小...
这个功能在很多场景下都非常有用,比如网页分享、游戏截图、在线编辑器保存草图等。 首先,我们要了解canvas的基本用法。canvas是一个矩形画布,通过JavaScript来控制它的内容。我们可以通过`<canvas>`标签在HTML中...
HTML5 Canvas是Web开发中的一个关键技术,...通过学习和实践这些HTML5 Canvas的核心技术,开发者可以构建出交互性强、视觉效果丰富的Web应用程序,无论是数据可视化、游戏开发还是艺术创作,Canvas都能提供强大的支持。
9. **保存和导出**:Canvas上的内容可以导出为图像,或者使用toDataURL方法生成数据URL,方便分享和存储。 10. **实际应用**:书中实例可能涵盖游戏开发、图表绘制、数据可视化、地图应用等多个实际场景,帮助...
这篇博客"canvas画图测试"可能涉及了使用Canvas进行图形绘制的基础知识和实践技巧。Canvas API的使用通常包括以下几个核心知识点: 1. **Canvas元素**:在HTML中,`<canvas>`标签定义了一个可编程的画布,通过...
2. 用户界面(UI):Android游戏通常使用自定义View或SurfaceView来实现游戏画面,结合Canvas进行绘制。UI的设计也包括菜单、暂停、设置等交互元素。 3. 图形渲染:游戏可能使用OpenGL ES进行高性能的2D或3D图形...
在“HTML5 Canvas学习笔记(6)拼图游戏(数字版)”这篇博文中,作者分享了如何利用Canvas构建一个数字拼图游戏。下面我们将详细探讨这个知识点。 1. **HTML5 Canvas基础**: - Canvas是一个基于矢量图形的画布元素...
1. Canvas绘图:H5游戏常用Canvas API进行动态绘图,实现游戏场景的渲染。通过JavaScript操作Canvas的绘图方法,可以绘制角色、障碍物并实现动画效果。 2. Event Handling:JavaScript的事件监听和处理机制在游戏中...
这个技术的引入极大地扩展了网页的交互性和动态性,尤其在创建复杂的动画效果和游戏场景时表现得尤为出色。在这个特定的场景中,我们讨论的是如何使用HTML5 Canvas实现视频网站的文字弹幕动画特效。 首先,我们要...
H5游戏源码的分享,对于学习者来说是一次宝贵的实践机会,可以了解游戏逻辑、动画效果、用户交互等核心元素的实现方法。 【标签】"游戏":游戏是软件的一种类型,它可以提供娱乐、挑战或教育功能。H5游戏作为游戏的...
HTML5 Canvas API是Web开发中的一个强大工具,它允许开发者在网页上绘制2D图形,创建动态、交互式的游戏和应用程序。在这个项目中,“games:使用canvas api...在实践中,不断探索和创新,制作出更丰富、更有趣的游戏。
在“H5自写的小游戏源码分享”这...同时,这也是一个很好的学习实践机会,可以提升你的JavaScript编程水平,理解游戏开发中的逻辑思维和问题解决能力。不断练习和学习,你将能够创造出更多有趣、引人入胜的HTML5游戏。
8. **性能优化**:分享关于Canvas性能的技巧,如批处理绘图操作、使用图像数据缓冲区和避免不必要的重绘。 9. **高级应用**:深入探讨更复杂的用例,如粒子系统、游戏开发、图表绘制和数据可视化。 10. **实践案例...
【标题】:“jQuery HTML5微信分享游戏:围住神经猫游戏源码下载” 【描述】:这个资源提供了基于jQuery和HTML5技术开发的微信分享...对于希望从事移动互联网游戏开发的初学者来说,这是一个非常有价值的实践案例。
通过理解和实践这个项目,开发者可以掌握QML中的2D绘图技术,以及如何结合鼠标事件来实现动态的用户交互功能。这对于开发桌面应用、游戏或者任何需要在屏幕上绘制图形的场景都具有很高的实用价值。