来源:自学PHP网 时间:2018-02-08 09:56 作者: 阅读:次
[导读] 我们可以在HTML5 Canvas上绘制出图形或文字的阴影效果。canvas的阴影效果非常简单,通过一些简单的设置,就可以自动在图片或文字下面生成相应的阴影。填充模式是指在canvas中使用某张...
我们可以在 上绘制出图形或文字的阴影效果。canvas的阴影效果非常简单,通过一些简单的设置,就可以自动在图片或文字下面生成相应的阴影。下面是一个简单的例子: 在canvas中,图形的阴影由2D上下文的4个属性来控制:
上面例子的实现代码如下: var canvas = document.getElementById("ex1"); var context = canvas.getContext("2d"); context.shadowOffsetX = 10; context.shadowOffsetY = 10; context.shadowBlur = 4; context.shadowColor = "#666666"; //or use rgb(red, green, blue) context.fillStyle = "#000000"; context.fillRect(10,10, 50, 50); context.fillStyle = "#000066"; context.font = "30px Arial"; context.fillText("HTML5 Canvas Shadow", 10,120); 填充模式是指在canvas中使用某张图片作为一种模式来填充图形。我们可以通过 参数 参数
下面是一个使用填充模式的简单例子: var ctx = document.getElementById('canvas').getContext('2d'); // create new image object to use as pattern var img = new Image(); img.src = 'Canvas_createpattern.png'; img.onload = function(){ // create pattern var ptrn = ctx.createPattern(img,'repeat'); ctx.fillStyle = ptrn; ctx.fillRect(0,0,150,150) 我们在模式中使用的图片如下: 上面代码的返回结果如下: |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com