- 浏览: 1246969 次
文章分类
最新评论
-
netkongjian:
不错的界面控件知识,感谢分享!
PowerDesigner 界面 -
1zebra:
...
说说JSON和JSONP,也许你会豁然开朗,含jQuery用例 -
at1943:
恩,原来只是大概了解,现在有了跟深入的了解。
说说JSON和JSONP,也许你会豁然开朗,含jQuery用例 -
zhengzihui:
挺不错的,楼主继续。。。。
说说JSON和JSONP,也许你会豁然开朗,含jQuery用例 -
bommeibo:
非常不错啊...学习了.
PLSQL Developer 你用的很方便吗,看看就方便了
千呼万唤 HTML 5 (11) - 画布(canvas)之效果
介绍
HTML 5: 画布(canvas)之效果
- 填充色, 笔划色, 颜色值 | fillStyle, strokeStyle
- 剪裁 | clip()
- 渐变色 | createLinearGradient(), createRadialGradient(), CanvasGradient.addColorStop()
- 贴图的平铺模式 | createPattern()
- 阴影效果 | shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor
- 全局 Alpha | globalAlpha
- 新颜色与画布当前已有颜色的合成方式 | globalCompositeOperation
- 保存画布上下文,以及恢复画布上下文 | save(), restore()
- 像素操作 | createImageData(), getImageData(), putImageData(), ImageData, CanvasPixelArray
示例
1、填充色, 笔划色, 颜色值 | fillStyle, strokeStyle
canvas/effect/color.html
<!DOCTYPE HTML> <html> <head> <title>填充色, 笔划色, 颜色值</title> </head> <body> <canvas id="canvas" width="260" height="140" style="background-color: rgb(222, 222, 222)"> 您的浏览器不支持 canvas 标签 </canvas> <br /> <button type="button" onclick="drawIt();">Demo</button> <button type="button" onclick="clearIt();">清除画布</button> <script type="text/javascript"> var ctx = document.getElementById('canvas').getContext('2d'); function drawIt() { clearIt(); /* * context.fillStyle - 指定填充色的颜色值 * * context.strokeStyle - 指定笔划色的颜色值 * * 颜色值示例如下: * Color Name - "green" * #rgb - "#0f0" * #rrggbb = "#00ff00" * rgb(0-255, 0-255, 0-255) - rgb(0, 255, 0) * rgb(0.0%-100.0%, 0.0%-100.0%, 0.0%-100.0%) - rgb(0%, 100%, 0%) * rgba(0-255, 0-255, 0-255, 0.0-1.0) - rgb(0, 255, 0, 1) * rgba(0.0%-100.0%, 0.0%-100.0%, 0.0%-100.0%, 0.0-1.0) - rgb(0%, 100%, 0%, 1) */ ctx.fillStyle = 'Red'; ctx.strokeStyle = 'Green'; ctx.lineWidth = 10; // 看看 fillStyle 颜色的示例和 strokeStyle 颜色的示例,以及先 stroke 再 fill 和先 fill 再 stroke 的区别 ctx.beginPath(); ctx.rect(20, 20, 100, 100); ctx.stroke(); ctx.fill(); ctx.beginPath(); ctx.rect(140, 20, 100, 100); ctx.fill(); ctx.stroke(); } function clearIt() { ctx.clearRect(0, 0, 260, 140); } </script> </body> </html>
2、剪裁 | clip()
canvas/effect/clip.html
<!DOCTYPE HTML> <html> <head> <title>剪裁</title> </head> <body> <canvas id="canvas" width="512" height="512" style="background-color: rgb(222, 222, 222)"> 您的浏览器不支持 canvas 标签 </canvas> <br /> <button type="button" onclick="drawIt();">Demo</button> <button type="button" onclick="clearIt();">清除画布</button> <script type="text/javascript"> var ctx = document.getElementById('canvas').getContext('2d'); function drawIt() { clearIt(); var img = new Image(); img.onload = function () { ctx.drawImage(img, 0, 0, 512, 512); } img.src = "http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png"; // img.src = "http://www.cnblogs.com/assets/html5_logo.png"; /* * context.clip() - 只显示当前路径所包围的剪切区域 */ ctx.beginPath(); ctx.arc(256, 256, 100, 0, Math.PI * 2, true); ctx.clip(); } function clearIt() { ctx.clearRect(0, 0, 512, 512); } </script> </body> </html>
3、渐变色 | createLinearGradient(), createRadialGradient(), CanvasGradient.addColorStop()
canvas/effect/gradient.html
<!DOCTYPE HTML> <html> <head> <title>渐变色</title> </head> <body> <canvas id="canvas" width="200" height="100" style="background-color: rgb(222, 222, 222)"> 您的浏览器不支持 canvas 标签 </canvas> <br /> <button type="button" onclick="drawIt();">Demo</button> <button type="button" onclick="clearIt();">清除画布</button> <script type="text/javascript"> var ctx = document.getElementById('canvas').getContext('2d'); function drawIt() { clearIt(); /* * context.createLinearGradient(xStart, yStart, xEnd, yEnd) - 创建线性渐变对象,并返回 CanvasGradient 类型的对象 * xStart, yStart - 线性渐变对象的起始点坐标 * xEnd, yEnd - 线性渐变对象的结束点坐标 * * CanvasGradient.addColorStop(offset, color) - 新增一个渐变参考点 * offset - 渐变参考点的位置,0.0 - 1.0 之间。起始点为 0,结束点为 1 * color - 渐变参考点的颜色值 */ var linearGradient = ctx.createLinearGradient(50, 0, 50, 100); linearGradient.addColorStop(0, "red"); linearGradient.addColorStop(0.5, "green"); linearGradient.addColorStop(1, "blue"); ctx.beginPath(); ctx.arc(50, 50, 50, 0, 2 * Math.PI, true); ctx.fillStyle = linearGradient; ctx.fill(); /* * context.createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd) - 创建放射性渐变对象,并返回 CanvasGradient * xStart, yStart - 放射性渐变对象的开始圆的圆心坐标 * radiusStart - 开始圆的半径 * xEnd, yEnd - 放射性渐变对象的结束圆的圆心坐标 * radiusEnd - 结束圆的半径 */ var radialGradient = ctx.createRadialGradient(150, 50, 0, 150, 50, 50); radialGradient.addColorStop(0, "red"); radialGradient.addColorStop(0.5, "green"); radialGradient.addColorStop(1, "blue"); ctx.beginPath(); ctx.arc(150, 50, 50, 0, 2 * Math.PI, true); ctx.fillStyle = radialGradient; ctx.fill(); } function clearIt() { ctx.clearRect(0, 0, 200, 100); } </script> </body> </html>
4、贴图的平铺模式 | createPattern()
canvas/effect/pattern.html
<!DOCTYPE HTML> <html> <head> <title>贴图的平铺模式</title> </head> <body> <canvas id="canvas" width="620" height="620" style="background-color: rgb(222, 222, 222)"> 您的浏览器不支持 canvas 标签 </canvas> <br /> <button type="button" onclick="drawIt();">Demo</button> <button type="button" onclick="clearIt();">清除画布</button> <script type="text/javascript"> var ctx = document.getElementById('canvas').getContext('2d'); function drawIt() { clearIt(); var img = new Image(); img.onload = function () { /* * context.createPattern(image, repetitionStyle) - 指定贴图的平铺模式 * image - 图像对象。除了支持 HTMLImageElement 外,还支持 HTMLCanvasElement 和 HTMLVideoElement * repetitionStyle - 平铺模式(无论任何平铺模式,首图均在画布的左上角) * no-repeat - 不平铺,只贴图一次,当然也是在画布的左上角 * repeat-x - x 轴方向上平铺图片 * repeat-y - y 轴方向上平铺图片 * repeat - x 轴和 y 轴方向均平铺图片 */ var pattern = ctx.createPattern(img, "no-repeat"); ctx.fillStyle = pattern; ctx.strokeStyle = "blue"; ctx.beginPath(); ctx.rect(0, 0, 300, 300); ctx.fill(); ctx.stroke(); pattern = ctx.createPattern(img, "repeat-x"); ctx.fillStyle = pattern; ctx.strokeStyle = "blue"; ctx.beginPath(); ctx.rect(320, 0, 300, 300); ctx.fill(); ctx.stroke(); pattern = ctx.createPattern(img, "repeat-y"); ctx.fillStyle = pattern; ctx.strokeStyle = "blue"; ctx.beginPath(); ctx.rect(0, 320, 300, 300); ctx.fill(); ctx.stroke(); pattern = ctx.createPattern(img, "repeat"); ctx.fillStyle = pattern; ctx.strokeStyle = "blue"; ctx.beginPath(); ctx.rect(320, 320, 300, 300); ctx.fill(); ctx.stroke(); } img.src = "http://res2.windows.microsoft.com/resbox/en/Windows%207/main/4300ae64-546c-4bbe-9026-6779b3684fb9_0.png"; // img.src = "http://www.cnblogs.com/assets/windows_logo.png"; } function clearIt() { ctx.clearRect(0, 0, 620, 620); } </script> </body> </html>
5、阴影效果 | shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor
canvas/effect/shadow.html
<!DOCTYPE HTML> <html> <head> <title>阴影效果</title> </head> <body> <canvas id="canvas" width="480" height="480" style="background-color: rgb(222, 222, 222)"> 您的浏览器不支持 canvas 标签 </canvas> <br /> <button type="button" onclick="drawIt();">Demo</button> <button type="button" onclick="clearIt();">清除画布</button> <script type="text/javascript"> var ctx = document.getElementById('canvas').getContext('2d'); function drawIt() { clearIt(); /* * context.shadowOffsetX - 阴影相对于实体的水平偏移值 * context.shadowOffsetY - 阴影相对于实体的垂直偏移值 * context.shadowBlur - 阴影模糊程度。默认值是 0 ,即不模糊 * context.shadowColor - 阴影的颜色 */ ctx.shadowOffsetX = 5; ctx.shadowOffsetY = 10; ctx.shadowBlur = 10; ctx.shadowColor = "rgba(0, 0, 255, 0.5)"; ctx.beginPath(); ctx.arc(120, 120, 100, 0, Math.PI * 2, true); ctx.stroke(); ctx.fillRect(300, 300, 100, 100); } function clearIt() { ctx.clearRect(0, 0, 480, 480); } </script> </body> </html>
6、全局 Alpha | globalAlpha
canvas/effect/globalAlpha.html
<!DOCTYPE HTML> <html> <head> <title>全局 Alpha</title> </head> <body> <canvas id="canvas" width="140" height="140" style="background-color: rgb(222, 222, 222)"> 您的浏览器不支持 canvas 标签 </canvas> <br /> <button type="button" onclick="drawIt();">Demo</button> <button type="button" onclick="clearIt();">清除画布</button> <script type="text/javascript"> var ctx = document.getElementById('canvas').getContext('2d'); function drawIt() { clearIt(); /* * context.globalAlpha - 设置全局的 alpha 值 */ ctx.globalAlpha = "0.5"; ctx.fillStyle = "red"; ctx.beginPath(); ctx.rect(20, 20, 100, 100); ctx.fill(); } function clearIt() { ctx.clearRect(0, 0, 140, 140); } </script> </body> </html>
7、新颜色与画布当前已有颜色的合成方式 | globalCompositeOperation
canvas/effect/globalCompositeOperation.html
<!DOCTYPE HTML> <html> <head> <title>新颜色与画布当前已有颜色的合成方式</title> </head> <body> <div id="msg"></div> <canvas id="canvas" width="200" height="200" style="background-color: rgb(222, 222, 222)"> 您的浏览器不支持 canvas 标签 </canvas> <br /> <button type="button" onclick="drawIt();">改变 globalCompositeOperation</button> <button type="button" onclick="clearIt();">清除画布</button> <script type="text/javascript"> var ctx = document.getElementById('canvas').getContext('2d'); var compositeOperationTypes = ['source-atop', 'source-in', 'source-out', 'source-over', 'destination-atop', 'destination-in', 'destination-out', 'destination-over', 'lighter', 'copy', 'xor']; var index = 0; function drawIt() { clearIt(); ctx.fillStyle = "red"; ctx.beginPath(); ctx.rect(20, 20, 100, 100); ctx.fill(); /* * context.globalCompositeOperation - 设置新颜色与画布当前已有颜色的合成方式 * source-atop - 保留已有颜色,然后绘制新颜色与已有颜色重合的部分 * source-in - 绘制新颜色与已有颜色重合的部分,其余全透明 * source-out - 绘制新颜色与已有颜色不重合的部分,其余全透明 * source-over - 在已有颜色的前面绘制新颜色。默认值 * destination-atop - 在已有颜色的后面绘制新颜色,然后保留已有颜色与新颜色重合的部分 * destination-in - 保留已有颜色与新颜色重合的部分,其余全透明 * destination-out - 保留已有颜色与新颜色不重合的部分,其余全透明 * destination-over - 在已有颜色的后面绘制新颜色 * lighter - 混合重叠部分的颜色 * copy - 删除已有颜色,只绘制新颜色 * xor - 透明化重叠部分的颜色 */ ctx.globalCompositeOperation = compositeOperationTypes[index]; document.getElementById("msg").innerHTML = ctx.globalCompositeOperation; ctx.fillStyle = "blue"; ctx.beginPath(); ctx.rect(80, 80, 100, 100); ctx.fill(); index++; if (index >= compositeOperationTypes.length) index = 0; } function clearIt() { ctx.clearRect(0, 0, 200, 200); // source-over 是 context.globalCompositeOperation 的默认值 ctx.globalCompositeOperation = "source-over"; } </script> </body> </html>
8、保存画布上下文,以及恢复画布上下文 | save(), restore()
canvas/effect/save_restore.html
<!DOCTYPE HTML> <html> <head> <title>保存画布上下文,以及恢复画布上下文</title> </head> <body> <div>单击“save and draw”一次,然后单击“restore and draw”三次</div> <canvas id="canvas" width="280" height="140" style="background-color: rgb(222, 222, 222)"> 您的浏览器不支持 canvas 标签 </canvas> <br /> <button type="button" onclick="drawIt();">save and draw</button> <button type="button" onclick="restoreIt();">restore and draw</button> <script type="text/javascript"> var ctx = document.getElementById('canvas').getContext('2d'); /* * save() - 将画布的上下文压入堆栈 * restore() - 从堆栈中取一个画布的上下文,如果没有则什么都不做 */ function drawIt() { clearIt(); ctx.strokeStyle = "red"; ctx.fillStyle = "green"; ctx.lineWidth = 5; ctx.save(); // 将画布的上下文压入堆栈,此时堆栈中有一个画布上下文 drawRect1(); ctx.strokeStyle = "blue"; ctx.fillStyle = "yellow"; ctx.lineWidth = 10; ctx.save(); // 将画布的上下文压入堆栈,此时堆栈中有两个画布上下文 drawRect2(); } function restoreIt() { clearIt(); ctx.restore(); // 按后进先出的顺序从堆栈里取画布上下文,如果取不到则什么都不做 drawRect1(); drawRect2(); } function drawRect1() { ctx.beginPath(); ctx.rect(20, 20, 100, 100); ctx.stroke(); ctx.fill(); } function drawRect2() { ctx.beginPath(); ctx.rect(140, 20, 100, 100); ctx.stroke(); ctx.fill(); } function clearIt() { ctx.clearRect(0, 0, 280, 140); ctx.strokeStyle = "black"; ctx.fillStyle = "black"; ctx.lineWidth = 1; } </script> </body> </html>
9、像素操作 | createImageData(), getImageData(), putImageData(), ImageData, CanvasPixelArray
canvas/effect/imageData.html
<!DOCTYPE HTML> <html> <head> <title>像素操作</title> </head> <body> <div id="msg"></div> <canvas id="canvas" width="300" height="300" style="background-color: black"> 您的浏览器不支持 canvas 标签 </canvas> <br /> <button type="button" onclick="drawIt();">Demo</button> <button type="button" onclick="clearIt();">清除画布</button> <br /><br /> <canvas id="canvas2" width="300" height="300" style="background-color: black"> 您的浏览器不支持 canvas 标签 </canvas> <br /> <button type="button" onclick="syncIt();">同步第一个Demo</button> <button type="button" onclick="redIt();">变红</button> <script type="text/javascript"> var canvas = document.getElementById('canvas'); var canvas2 = document.getElementById('canvas2'); var ctx = canvas.getContext('2d'); var ctx2 = canvas2.getContext('2d'); var timer = -1; var width = parseInt(canvas.width, 10); var height = parseInt(canvas.height, 10); function drawIt() { clearIt(); /* * context.createImageData(width, height) - 按指定的宽和高创建并返回 ImageData 对象,其内所有像素的默认值为 rgba(0,0,0,0) * * context.createImageData(imageData) - 按指定的 ImageData 对象的宽和高创建一个新的 ImageData 对象并返回此对象,其内所有像素的默认值为 rgba(0,0,0,0) * 相当于 context.createImageData(imageData.width, imageData.height) * * context.getImageData(x, y, width, height) - 获取画布的指定范围内的 ImageData 对象,并返回此对象 * x - 需要获取的 ImageData 对象矩形框相对于画布的左上角的 x 坐标 * y - 需要获取的 ImageData 对象矩形框相对于画布的左上角的 y 坐标 * width - 需要获取的 ImageData 对象矩形框的宽 * height - 需要获取的 ImageData 对象矩形框的高 * * putImageData(imagedata, x, y, [dirtyX, dirtyY, dirtyWidth, dirtyHeight]) - 在画布上写入指定的数据 * imagedata - 需要写入的 ImageData 对象 * x, y - 指定需要写入的 ImageData 对象矩形框相对于画布左上角的坐标 * [dirtyX, dirtyY, dirtyWidth, dirtyHeight] - 显示 ImageData 对象上指定范围内像素 */ /* * ImageData - 像素对象 * width - 像素对象的宽 * height - 像素对象的高 * data - 像素数据,CanvasPixelArray 类型的对象 * * CanvasPixelArray - 像素数据对象,可以数组方式进行操作 * 数组中每 4 个元素代表一个像素,每个元素为一个字节,4 个元素按照 rgba 的方式描述一个像素 * length - 元素总数,即像素总数 * 4 */ var imageData = ctx.createImageData(width, height); document.getElementById("msg").innerHTML = "CanvasPixelArray.length: " + imageData.data.length; // 随机生成颜色不一样的像素,并写入到画布上 timer = setInterval(randomPixel, 1); function randomPixel() { var x = parseInt(Math.random() * width, 10); var y = parseInt(Math.random() * height, 10); var index = (y * width + x) * 4; imageData.data[index + 0] = parseInt(Math.random() * 256); imageData.data[index + 1] = parseInt(Math.random() * 256); imageData.data[index + 2] = parseInt(Math.random() * 256); imageData.data[index + 3] = parseInt(Math.random() * 256); ctx.putImageData(imageData, 50, 50, 0, 0, 200, 200); } } function clearIt() { clearInterval(timer); ctx.clearRect(0, 0, width, height); } // 将 canvas 上的像素数据复制到 canvas2 上 function syncIt() { var imageData = ctx.getImageData(0, 0, width, height); ctx2.putImageData(imageData, 0, 0); } // 将 canvas2 上的非 rgba(0,0,0,0) 的点都变成红色 function redIt() { var imageData = ctx2.getImageData(0, 0, width, height); for (var i = 1; i < imageData.data.length / 4; i++) { var index = i * 4; if (imageData.data[index + 0] + imageData.data[index + 1] + imageData.data[index + 2] + imageData.data[index + 3] > 0) { imageData.data[index + 0] = 255; imageData.data[index + 1] = 0; imageData.data[index + 2] = 0; imageData.data[index + 3] = 255; } } ctx2.putImageData(imageData, 0, 0); } </script> </body> </html>
相关推荐
QML--Canvas画布实现矩形圆形等圈定
html5个人练习用网页,包含各种基础模块,<audio> 定义音频内容 <video> 定义视频(video 或者 movie) 定义多媒体资源 <video> 和 <audio> <embed> 定义嵌入的内容,比如插件。 为...
Html5-canvas之图片添加马赛克 Html5-canvas之图片添加马赛克
html5 canvas画布里面圆球弹跳动画效果代码 html5 canvas画布里面圆球弹跳动画效果代码
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
无限画布无限的html5画布描述提供一个接口,以垂直和水平无限地平移html5画布。 这通过创建无限增长的缓冲画布来工作,当使用.move([x, y])相对移动原点或绝对使用.setOrigin([x, y])相对移动原点时,可以调整画布的...
wxml-to-canvas 小程序内通过静态模板和样式绘制 canvas ,导出图片,可用于生成分享图等场景
HTML5+JS游戏开发模块----canvas图片拖放,炮塔攻击范围绘制,炮塔原本位置,炮塔图片的拖放
canvas-nest.js一个基于html5 canvas绘制的网页背景效果
canvas拼图游戏,基于html + canvas画布实现
HTML5+JS游戏开发模块----canvas打字游戏 里面实现多个字母同时出现,每个字体都有自己的随机速度,字母数组的随机生成,canvas 模拟鼠标经过效果,鼠标点击,按键触发,字母换颜色,项目简单,希望能够给初学者一些...
html5 canvas画布实现液体波浪动画效果 html5 canvas画布实现液体波浪动画效果
HTML5之画布Canvas.doc中详解了Canvas的精华,但愿能帮上正在路上学习的人
node-canvas, node Canvas是一个Cairo支持的NodeJS画布实现 节点画布这是版本 2.0.0 -alpha的文档Alpha版本的2.0可以使用 npm install canvas@next 安装。有关从 1.x 升级到 2. x.的指南,请参阅变更日志版本 1.x ...
html5 canvas画布随机颜色变化特效 html5 canvas画布随机颜色变化特效
Android 自定义画布canvas 实现绘制和清空画布功能,内含源码、apk
微信小程序,画图板制作 画图,画布canvas,源码下载,
html5 canvas画布绘制圆形时钟代码
文字粒子效果,通过canvas side的开发
前端开源库-map-canvas地图画布,用于