canvas 绘制文字的园带阴影怎么绘制

来源：蜘蛛抓取(WebSpider) 时间：2016-10-26 07:17 标签： canvas清空上一次绘制
使用HTML5画布（canvas）生成阴影效果_html5_ThinkSAAS
使用HTML5画布（canvas）生成阴影效果
使用HTML5画布（canvas）生成阴影效果
来源：使用的画布特性，我们可以创建图形，在这片文章中，我们将创建图形的阴影。 var canvas=document.getElementById('shadowcanvas');var ctx=canvas.getContext('2d');ctx.save();ctx.fillStyle='#EB852A';ctx.shadowOffsetX=15;// 阴影Y轴偏移 ctx.shadowOffsetY=15;// 阴影X轴偏移 ctx.shadowBlur=14;// 模糊尺寸 ctx.shadowColor='rgba(0, 0, 0, 0.5)';// 颜色 ctx.beginPath();ctx.arc(150, 150, 75, 0, 2 * Math.PI, false);ctx.fill();ctx.restore();ctx.fillStyle='#222222';ctx.beginPath();ctx.arc(350, 150, 75, 0, 2 * Math.PI, false);ctx.fill();这段代码中，我们首先得到画布并取得context，调用方法添加阴影相关属性，包括了偏移，模糊和阴影颜色。最后调用canvas方法生成图形，这里我们为了更好的对比效果，分别生成了2个圆形，一个包含阴影，一个不包含阴影。注意：以上阴影属性，至少得设置颜色和模糊度。运行代码：GBdebug在线调试地址：希望这个小技巧能帮助大家生成更酷的画布效果。via 来源：
PHP开发框架
开发工具/编程工具
服务器环境
ThinkSAAS商业授权：
ThinkSAAS为用户提供有偿个性定制开发服务
ThinkSAAS将为商业授权用户提供二次开发指导和技术支持
让ThinkSAAS更好，把建议拿来。
开发客服微信使用HTML5画布（canvas）生成阴影效果
日期：&&来源：
使用的画布特性，我们可以创建图形，在这片文章中，我们将创建图形的阴影。
var canvas = document.getElementById('shadowcanvas');
var ctx = canvas.getContext('2d');
ctx.save();
ctx.fillStyle = '#EB852A';
ctx.shadowOffsetX = 15; // 阴影Y轴偏移
ctx.shadowOffsetY = 15; // 阴影X轴偏移
ctx.shadowBlur = 14; // 模糊尺寸
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; // 颜色
ctx.beginPath();
ctx.arc(150, 150, 75, 0, 2 * Math.PI, false);
ctx.fill();
ctx.restore();
ctx.fillStyle = '#222222';
ctx.beginPath();
ctx.arc(350, 150, 75, 0, 2 * Math.PI, false);
ctx.fill();
这段代码中，我们首先得到画布并取得context，调用方法添加阴影相关属性，包括了偏移，模糊和阴影颜色。最后调用canvas方法生成图形，这里我们为了更好的对比效果，分别生成了2个圆形，一个包含阴影，一个不包含阴影。注意：以上阴影属性，至少得设置颜色和模糊度。运行代码：GBdebug在线调试地址：希望这个小技巧能帮助大家生成更酷的画布效果。via
喜欢我们的文章请您与朋友分享:
除特别声明外, 本站所有内容皆为原创，且基于创作共享的 署名-非商业使用-相同方式分享 2.5 协议发布. 转载时请务必以超链接形式标明文章出处和作者信息Android 绘图 阴影制作（Shadow） - 明明的天天 - 博客园
随笔 - 154, 文章 - 0, 评论 - 40, 引用 - 0
&阴影制作：包括各种形状（矩形，圆形等等），以及文字等等都能设置阴影。
阴影制作是什么原理呢？
其实很简单，你需要设置阴影的东西被看作一个主层。然后在主层下面画一个阴影层。
阴影制作涉及到一个重要函数：
public & void &&setShadowLayer&(float radius, float dx, float dy, int color)
radius：阴影半径
dx：X轴方向的偏移量
dy：Y轴方向的偏移量
color：阴影颜色
注意：如果半径被设置为0，意思就是去掉阴影。
具体实现：
package xiaosi.textS
import android.app.A
import android.content.C
import android.graphics.B
import android.graphics.BitmapF
import android.graphics.C
import android.graphics.C
import android.graphics.P
import android.os.B
import android.view.V
public class TextShadowActivity extends Activity
&&&&@Override
&&&&public void onCreate(Bundle savedInstanceState)
&&&&&&&&super.onCreate(savedInstanceState);
&&&&&&&&setContentView(new drawCanvas(this));
&&&&class drawCanvas extends View
&&&&&&&&private Bitmap& bitmap = null;
&&&&&&&&public drawCanvas(Context context)
&&&&&&&&&&&&super(context);
&&&&&&&&&&&&bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.i_skinprocess);
&&&&&&&&@Override
&&&&&&&&protected void onDraw(Canvas canvas)
&&&&&&&&&&&&super.onDraw(canvas);
&&&&&&&&&&&&
&&&&&&&&&&&&Paint paint1 = new Paint();
&&&&&&&&&&&&
&&&&&&&&&&&&paint1.setColor(0xFFFFFF00);
&&&&&&&&&&&&
&&&&&&&&&&&&paint1.setShadowLayer(5, 3, 3, 0xFFFF00FF);
&&&&&&&&&&&&
&&&&&&&&&&&&canvas.drawText("我很爱你", 20,40,paint1);
&&&&&&&&&&&&Paint paint2 = new Paint();
&&&&&&&&&&&&paint2.setColor(Color.GREEN);
&&&&&&&&&&&&paint2.setShadowLayer(10, 5, 2, Color.YELLOW);
&&&&&&&&&&&&canvas.drawText("你真傻", 20,60,paint2);
&&&&&&&&&&&&&
&&&&&&&&&&&&Paint paint3 = new Paint();
&&&&&&&&&&&&paint3.setColor(Color.RED);
&&&&&&&&&&&&paint3.setShadowLayer(30, 5, 2, Color.GREEN);
&&&&&&&&&&&&canvas.drawCircle(50, 130,30, paint3);
&&&&&&&&&&&&&
&&&&&&&&&&&&Paint paint4 = new Paint();
&&&&&&&&&&&&paint4.setShadowLayer(5, 8, 7, Color.DKGRAY);
&&&&&&&&&&&&canvas.drawBitmap(bitmap, 50, 200, paint4);Android cavas阴影的绘制_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
Android cavas阴影的绘制
上传于||文档简介
&&Android cavas阴影的绘制
阅读已结束，如果下载本文需要使用0下载券
想免费下载更多文档？
定制HR最喜欢的简历
你可能喜欢有些人使用CSS做阴影效果，但是在HTML5中，canvas工具提供了一个相当不错的阴影效果方法，这可以使我们能够实现一个相当不错的阴影效果。
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Canvas&/title&
&style type="text/css"&
body{margin:20px auto; padding:0; width:<span style="background-color: #f5f5f5; color: #px; }
canvas{border:dashed 2px #CCC}
&script type="text/javascript"&
function $$(id){
return document.getElementById(id);
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.fillStyle = '#666';
cans.shadowOffsetX = 3;
cans.shadowOffsetY = 3;
cans.shadowColor = '#333';
cans.shadowBlur = 8;
cans.fillRect(200,300,400,200);
&body onload="pageLoad();"&
&canvas id="can" width="800px" height="600px"&&/canvas&
使用了四个方法，实现了Canvas中的阴影效果，shadowOffset是横向、纵向偏移量，shadowBlur是模糊量，值越大，模糊效果越强（最好1-10）
阅读(...) 评论()

我要回帖

更多关于 canvas清空上一次绘制 的文章

 

随机推荐