canvas画出canvas贝塞尔曲线动画的连线走势动画,有没有什么方案

&nbsp&#8250&nbsp&nbsp&#8250&nbsp
Android中Path类的lineTo方法和quadTo方法画线的区别
& &当我们需要在屏幕上形成画线时,Path类的应用是必不可少的,而Path类的lineTo和quadTo方法实现的绘制线路形式也是不一样的,下面就以代码的实现来直观的探究这两个方法的功能实现区别;& &1. Path---&quadTo(float x1, float y1, float x2, float y2):& && 该方法的实现是当我们不仅仅是画一条线甚至是画弧线时会形成平滑的曲线,该曲线又称为&贝塞尔曲线&(Bezier curve),其中,x1,y1为控制点的坐标值,x2,y2为终点的坐标值;& & 贝塞尔曲线的形成,就比如我们把一条橡皮筋拉直,橡皮筋的头尾部对应起点和终点,然后从拉直的橡皮筋中选择任意一点(除头尾对应的点外)扯动橡皮筋形成的弯曲形状,而那个扯动橡皮筋的点就是控制点;& & 下就面以一个Demo来结合理解quadTo函数的应用,代码如下:& & & &1).自定义View:package&com.feixun.hu.
import&android.content.C
import&android.gesture.GestureS
import&android.graphics.C
import&android.graphics.C
import&android.graphics.P
import&android.graphics.P
import&android.graphics.R
import&android.graphics.Paint.S
import&android.view.MotionE
import&android.view.V
import&android.widget.T
public&class&DrawingWithBezier&extends&View
&&&&private&float&mX;
&&&&private&float&mY;
&&&&private&final&Paint&mGesturePaint&=&new&Paint();
&&&&private&final&Path&mPath&=&new&Path();
&&&&public&DrawingWithBezier(Context&context)
&&&&&&&&super(context);
&&&&&&&&mGesturePaint.setAntiAlias(true);
&&&&&&&&mGesturePaint.setStyle(Style.STROKE);
&&&&&&&&mGesturePaint.setStrokeWidth(5);
&&&&&&&&mGesturePaint.setColor(Color.WHITE);
&&&&@Override
&&&&public&boolean&onTouchEvent(MotionEvent&event)
&&&&&&&&//&TODO&Auto-generated&method&stub
&&&&&&&&switch&(event.getAction())
&&&&&&&&&&&&case&MotionEvent.ACTION_DOWN:
&&&&&&&&&&&&&&&&touchDown(event);
&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&case&MotionEvent.ACTION_MOVE:
&&&&&&&&&&&&&&&&touchMove(event);
&&&&&&&&//更新绘制
&&&&&&&&invalidate();
&&&&&&&&return&
&&&&@Override
&&&&protected&void&onDraw(Canvas&canvas)
&&&&&&&&//&TODO&Auto-generated&method&stub
&&&&&&&&super.onDraw(canvas);
&&&&&&&&//通过画布绘制多点形成的图形
&&&&&&&&canvas.drawPath(mPath,&mGesturePaint);
&&&&//手指点下屏幕时调用
&&&&private&void&touchDown(MotionEvent&event)
&&&&&&&&//mPath.rewind();
&&&&&&&&//重置绘制路线,即隐藏之前绘制的轨迹
&&&&&&&&mPath.reset();
&&&&&&&&float&x&=&event.getX();
&&&&&&&&float&y&=&event.getY();
&&&&&&&&mX&=&x;
&&&&&&&&mY&=&y;
&&&&&&&&//mPath绘制的绘制起点
&&&&&&&&mPath.moveTo(x,&y);
&&&&//手指在屏幕上滑动时调用
&&&&private&void&touchMove(MotionEvent&event)
&&&&&&&&final&float&x&=&event.getX();
&&&&&&&&final&float&y&=&event.getY();
&&&&&&&&final&float&previousX&=&mX;
&&&&&&&&final&float&previousY&=&mY;
&&&&&&&&final&float&dx&=&Math.abs(x&-&previousX);
&&&&&&&&final&float&dy&=&Math.abs(y&-&previousY);
&&&&&&&&//两点之间的距离大于等于3时,生成贝塞尔绘制曲线
&&&&&&&&if&(dx&&=&3&||&dy&&=&3)
&&&&&&&&&&&&//设置贝塞尔曲线的操作点为起点和终点的一半
&&&&&&&&&&&&float&cX&=&(x&+&previousX)&/&2;
&&&&&&&&&&&&float&cY&=&(y&+&previousY)&/&2;
&&&&&&&&&&&&//二次贝塞尔,实现平滑曲线;previousX,&previousY为操作点,cX,&cY为终点
&&&&&&&&&&&&mPath.quadTo(previousX,&previousY,&cX,&cY);
&&&&&&&&&&&&//第二次执行时,第一次结束调用的坐标值将作为第二次调用的初始坐标值
&&&&&&&&&&&&mX&=&x;
&&&&&&&&&&&&mY&=&y;
}2).MainActivity:package&com.feixun.hu.
import&android.app.A
import&android.os.B
import&android.view.W
import&android.view.WindowM
public&class&MainActivity&extends&Activity
&&&&/**&Called&when&the&activity&is&first&created.&*/
&&&&@Override
&&&&public&void&onCreate(Bundle&savedInstanceState)
&&&&&&&&super.onCreate(savedInstanceState);
&&&&&&&&//setContentView(new&MySurfaceView(this));
&&&&&&&&setContentView(new&DrawingWithBezier(this));
&&&&&&&&//setContentView(new&DrawingWithoutBezier(this));&&&&&&
}该Demo实现用户在手机屏幕上滑动手指时,可根据手指滑动的位置绘制出相应的线条,类似输入法手势的绘制,所以代码中的画笔Paint命名为mGesturePaint;比如,我们在屏幕上绘制S这个图案,则形成的图案如下:&& & & & & && &2. Path---&lineTo(float x, float y) :& & &该方法实现的仅仅是两点连成一线的绘制线路,这样,当我们用这个方法绘制曲线时,缺陷就出来了;下面的例子,同样还是和上面的Demo差不多,只不过Path调用的是lineTo方法,如下:& & & &1). 自定义View:package&com.feixun.hu.
import&android.content.C
import&android.graphics.B
import&android.graphics.C
import&android.graphics.C
import&android.graphics.P
import&android.graphics.P
import&android.graphics.Bitmap.C
import&android.graphics.Paint.S
import&android.view.MotionE
import&android.view.V
import&android.widget.T
public&class&DrawingWithoutBezier&extends&View
&&&&private&float&mX;
&&&&private&float&mY;
&&&&private&final&Paint&mGesturePaint&=&new&Paint();
&&&&private&final&Path&mPath&=&new&Path();
&&&&public&DrawingWithoutBezier(Context&context)
&&&&&&&&super(context);
&&&&&&&&mGesturePaint.setAntiAlias(true);
&&&&&&&&mGesturePaint.setStyle(Style.STROKE);
&&&&&&&&mGesturePaint.setStrokeWidth(5);
&&&&&&&&mGesturePaint.setColor(Color.WHITE);
&&&&@Override
&&&&public&boolean&onTouchEvent(MotionEvent&event)
&&&&&&&&//&TODO&Auto-generated&method&stub
&&&&&&&&switch&(event.getAction())
&&&&&&&&&&&&case&MotionEvent.ACTION_DOWN:
&&&&&&&&&&&&&&&&touchDown(event);
&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&case&MotionEvent.ACTION_MOVE:
&&&&&&&&&&&&&&&&touchMove(event);
&&&&&&&&//更新绘制
&&&&&&&&invalidate();
&&&&&&&&return&
&&&&@Override
&&&&protected&void&onDraw(Canvas&canvas)
&&&&&&&&//&TODO&Auto-generated&method&stub
&&&&&&&&super.onDraw(canvas);
&&&&&&&&canvas.drawPath(mPath,&mGesturePaint);
&&&&//手指点下屏幕时调用
&&&&private&void&touchDown(MotionEvent&event)
&&&&&&&&//mPath.rewind();
&&&&&&&&mPath.reset();
&&&&&&&&float&x&=&event.getX();
&&&&&&&&float&y&=&event.getY();
&&&&&&&&mX&=&x;
&&&&&&&&mY&=&y;
&&&&&&&&//mPath绘制的绘制起点
&&&&&&&&mPath.moveTo(x,&y);
&&&&//手指在屏幕上滑动时调用
&&&&private&void&touchMove(MotionEvent&event)
&&&&&&&&final&float&x&=&event.getX();
&&&&&&&&final&float&y&=&event.getY();
&&&&&&&&final&float&previousX&=&mX;
&&&&&&&&final&float&previousY&=&mY;
&&&&&&&&final&float&dx&=&Math.abs(x&-&previousX);
&&&&&&&&final&float&dy&=&Math.abs(y&-&previousY);
&&&&&&&&//两点之间的距离大于等于3时,连接连接两点形成直线
&&&&&&&&if&(dx&&=&3&||&dy&&=&3)
&&&&&&&&&&&&//两点连成直线
&&&&&&&&&&&&mPath.lineTo(x,&y);
&&&&&&&&&&&&
&&&&&&&&&&&&//第二次执行时,第一次结束调用的坐标值将作为第二次调用的初始坐标值
&&&&&&&&&&&&mX&=&x;
&&&&&&&&&&&&mY&=&y;
}2).MainActivity:package&com.feixun.hu.
import&android.app.A
import&android.os.B
import&android.view.W
import&android.view.WindowM
public&class&MainActivity&extends&Activity
&&&&/**&Called&when&the&activity&is&first&created.&*/
&&&&@Override
&&&&public&void&onCreate(Bundle&savedInstanceState)
&&&&&&&&super.onCreate(savedInstanceState);
&&&&&&&&//setContentView(new&MySurfaceView(this));
&&&&&&&&//setContentView(new&DrawingWithBezier(this));
&&&&&&&&setContentView(new&DrawingWithoutBezier(this));&&&&&&
}同样地,用该例子绘制S形图案,形成的图案如下:& & & & && &结论 :对比前面quadTo方法绘制的S,lineTo绘制的S在弯曲部分很明显的不能形成平滑的弯曲,会出现明显的两点形成一线的突痕。可能图片看的不是清楚,自行运行这个Demo,然后在屏幕上绘制弯曲曲线或者圆,对比查看他们的形状区别就一目了然;& &3. SurfaceView绘制贝塞尔曲线:& & & &上面的绘制图案方式都是基于View来绘制,当然,我们也可以结合SurfaceView和Rect来实现绘制贝塞尔曲线,这样绘制的效果相对会比较好,而且效率也相对较高,毕竟相对SurfaceView而言,在动态绘制点线方面较之View更加出色;& & & &如下代码:& & & 1).自定义SurfaceView:package&com.feixun.hu.
import&android.content.C
import&android.graphics.C
import&android.graphics.C
import&android.graphics.P
import&android.graphics.P
import&android.graphics.R
import&android.graphics.Paint.S
import&android.view.MotionE
import&android.view.SurfaceH
import&android.view.SurfaceV
public&class&MySurfaceView&extends&SurfaceView&
&&&&private&Context&mC
&&&&private&float&mX;
&&&&private&float&mY;
&&&&private&SurfaceHolder&
&&&&private&Canvas&
&&&&private&float&mCurveEndX;
&&&&private&float&mCurveEndY;
&&&&private&final&Paint&mGesturePaint&=&new&Paint();
&&&&private&final&Path&mPath&=&new&Path();
&&&&private&final&Rect&mInvalidRect&=&new&Rect();
&&&&private&boolean&isD
&&&&public&MySurfaceView(Context&context)
&&&&&&&&super(context);
&&&&&&&&mContex&=&
&&&&&&&&sfh&=&this.getHolder();
&&&&&&&&mGesturePaint.setAntiAlias(true);
&&&&&&&&mGesturePaint.setStyle(Style.STROKE);
&&&&&&&&mGesturePaint.setStrokeWidth(5);
&&&&&&&&mGesturePaint.setColor(Color.WHITE);
&&&&&&&&//&TODO&Auto-generated&constructor&stub
&&&&public&void&drawCanvas()&{
&&&&&&&&try&{
&&&&&&&&&&&&canvas&=&sfh.lockCanvas();
&&&&&&&&&&&&if&(canvas&!=&null)&{
&&&&&&&&&&&&&&&&canvas.drawColor(Color.BLACK);
&&&&&&&&&&&&&&&&canvas.drawPath(mPath,&mGesturePaint);
&&&&&&&&&&&&}
&&&&&&&&}&catch&(Exception&e)&{
&&&&&&&&&&&&//&TODO:&handle&exception
&&&&&&&&}&finally&{
&&&&&&&&&&&&if&(canvas&!=&null)
&&&&&&&&&&&&&&&&sfh.unlockCanvasAndPost(canvas);
&&&&@Override
&&&&public&boolean&onTouchEvent(MotionEvent&event)
&&&&&&&&//&TODO&Auto-generated&method&stub
&&&&&&&&switch&(event.getAction())
&&&&&&&&&&&&case&MotionEvent.ACTION_DOWN:
&&&&&&&&&&&&&&&&touchDown(event);
&&&&&&&&&&&&&&&&invalidate();
&&&&&&&&&&&&&&&&return&
&&&&&&&&&&&&case&MotionEvent.ACTION_MOVE:
&&&&&&&&&&&&&&&&if&(isDrawing)
&&&&&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&&&&&Rect&rect&=&touchMove(event);
&&&&&&&&&&&&&&&&&&&&if&(rect&!=&null)&{
&&&&&&&&&&&&&&&&&&&&&&&&invalidate(rect);
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&&&&&return&
&&&&&&&&&&&&&&&&}&&&&&&&&&&&
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&case&MotionEvent.ACTION_UP:
&&&&&&&&&&&&&&&&if&(isDrawing)
&&&&&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&&&&&touchUp(event);
&&&&&&&&&&&&&&&&&&&&invalidate();
&&&&&&&&&&&&&&&&&&&&return&
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&return&super.onTouchEvent(event);
&&&&private&void&touchDown(MotionEvent&event)
&&&&&&&&isDrawing&=&
&&&&&&&&mPath.reset();
&&&&&&&&float&x&=&event.getX();
&&&&&&&&float&y&=&event.getY();
&&&&&&&&mX&=&x;
&&&&&&&&mY&=&y;
&&&&&&&&mPath.moveTo(x,&y);
&&&&&&&&mInvalidRect.set((int)&x,&(int)&y,&(int)&x&,&(int)&y);
&&&&&&&&mCurveEndX&=&x;
&&&&&&&&mCurveEndY&=&y;
&&&&private&Rect&touchMove(MotionEvent&event)
&&&&&&&&Rect&areaToRefresh&=&
&&&&&&&&final&float&x&=&event.getX();
&&&&&&&&final&float&y&=&event.getY();
&&&&&&&&final&float&previousX&=&mX;
&&&&&&&&final&float&previousY&=&mY;
&&&&&&&&final&float&dx&=&Math.abs(x&-&previousX);
&&&&&&&&final&float&dy&=&Math.abs(y&-&previousY);
&&&&&&&&if&(dx&&=&3&||&dy&&=&3)
&&&&&&&&&&&&areaToRefresh&=&mInvalidR
&&&&&&&&&&&&areaToRefresh.set((int)&mCurveEndX&,&(int)&mCurveEndY&,
&&&&&&&&&&&&&&&&&&&&(int)&mCurveEndX,&(int)&mCurveEndY);
&&&&&&&&&&&&
&&&&&&&&&&//设置贝塞尔曲线的操作点为起点和终点的一半
&&&&&&&&&&&&float&cX&=&mCurveEndX&=&(x&+&previousX)&/&2;
&&&&&&&&&&&&float&cY&=&mCurveEndY&=&(y&+&previousY)&/&2;
&&&&&&&&&&&&//实现绘制贝塞尔平滑曲线;previousX,&previousY为操作点,cX,&cY为终点
&&&&&&&&&&&&mPath.quadTo(previousX,&previousY,&cX,&cY);
&&&&&&&&&&&&//mPath.lineTo(x,&y);
&&&&&&&&&&&&//&union&with&the&control&point&of&the&new&curve
&&&&&&&&&&&&/*areaToRefresh矩形扩大了border(宽和高扩大了两倍border),
&&&&&&&&&&&&&*&border值由设置手势画笔粗细值决定
&&&&&&&&&&&&&*/
&&&&&&&&&&&&areaToRefresh.union((int)&previousX,&(int)&previousY,
&&&&&&&&&&&&&&&&&&&&(int)&previousX,&(int)&previousY);
&&&&&&&&&&&/*&areaToRefresh.union((int)&x,&(int)&y,
&&&&&&&&&&&&&&&&&&&&(int)&x,&(int)&y);*/
&&&&&&&&&&&&
&&&&&&&&&&&&//&union&with&the&end&point&of&the&new&curve
&&&&&&&&&&&&areaToRefresh.union((int)&cX,&(int)&cY&,
&&&&&&&&&&&&&&&&&&&&(int)&cX,&(int)&cY);
&&&&&&&&&&&&//第二次执行时,第一次结束调用的坐标值将作为第二次调用的初始坐标值
&&&&&&&&&&&&mX&=&x;
&&&&&&&&&&&&mY&=&y;
&&&&&&&&&&&&drawCanvas();
&&&&&&&&return&areaToR
&&&&private&void&touchUp(MotionEvent&event)
&&&&&&&&isDrawing&=&
}2). MainActivity:package&com.feixun.hu.
import&android.app.A
import&android.os.B
import&android.view.W
import&android.view.WindowM
public&class&MainActivity&extends&Activity
&&&&/**&Called&when&the&activity&is&first&created.&*/
&&&&@Override
&&&&public&void&onCreate(Bundle&savedInstanceState)
&&&&&&&&super.onCreate(savedInstanceState);
&&&&&&&&setContentView(new&MySurfaceView(this));
&&&&&&&&//setContentView(new&DrawingWithBezier(this));
&&&&&&&&//setContentView(new&DrawingWithoutBezier(this));&&&&&&
}相关代码下载链接:
上一篇: 安卓开发中,在写布局代码的时候,ide可以看到布局的预览效果。 但是有些效果则必须在运行之后才能看见,比如这种情况:TextView在xml中没有设置任何字符,而是在activity中设置了text。因此为了在ide中预览效果,你必须在xml中为TextView控件设置android:te
下一篇: 译文原文 http://blog.csdn.net/lzyzsd/article/details/ 英文原文 Grokking RxJava, Part 2: Operator, Operator 在 第一篇blog 中,我介绍了RxJava的一些基础知识,同时也介绍了map()操作符。当然如果你并没有意愿去使用RxJava我一点都不诧异,毕canvas画出贝塞尔曲线的连线走势动画,有没有什么方案_百度知道
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。
canvas画出贝塞尔曲线的连线走势动画,有没有什么方案
我有更好的答案
html" target="_blank">/blog//zhidao/wh%3D600%2C800/sign=94a99fbd0bf3d7ca0ca1/bcffc129cf703eafb.jpg" esrc="/jay-dong/archive//2704188.jpg" target="_blank" title="点击查看大图" class="ikqb_img_alink">如果是这种效果的话,可以参考.baidu?是这种效果吗./zhidao/wh%3D600%2C800/sign=/zhidao/pic/item/21a52d1169fbd0bf3d7ca7bcbd52c.jpg" target="_blank" title="点击查看大图" class="ikqb_img_alink"><img class="ikqb_img" src="blogs:<a href="http://b.hiphotos://e://www./zhidao/wh%3D450%2C600/sign=1dd3db6eca903/21a52d1169fbd0bf3d7ca7bcbd52c.baidu://b.html<a href="http.jpg" esrc="http
采纳率:64%
为您推荐:
其他类似问题
贝塞尔曲线的相关知识
等待您来回答canvas画出贝塞尔曲线的连线走势动画,有没有什么方案_百度知道
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。
canvas画出贝塞尔曲线的连线走势动画,有没有什么方案
我有更好的答案
儿童散学归来早,忙趁东风放纸鸢.
为您推荐:
其他类似问题
等待您来回答今天看啥 热点:
使用canvas绘制贝塞尔曲线,canvas绘制贝塞尔这篇文章主要介绍了使用canvas绘制贝塞尔曲线,包括2次和三次的凡赛尔曲线,非常的详细,推荐个小伙伴。
1、二次贝塞尔曲线
  quadraticCurveTo(cpx,cpy,x,y)  //cpx,cpy表示控制点的坐标,x,y表示终点坐标;
数学公式表示如下:
二次方贝兹曲线的路径由给定点P0、P1、P2的函数B(t)追踪:
代码实例:
代码如下:&!DOCTYPE html&&html&&head&&meta charset="utf-8"&&title&canvas直线&/title&&meta name="Keywords" content=""&&meta name="author" content="@my_programmer"&&style type="text/css"&
body, h1{margin:0;}
canvas{margin: 20}&/style&&/head&&body onload="draw()"&
&h1&二次贝塞尔曲线&/h1&
&canvas id="canvas" width=200 height=200 style="border: 1px solid #"&&/canvas&&script&
function draw() {
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
//绘制起始点、控制点、终点
context.beginPath();
context.moveTo(20,170);
context.lineTo(130,40);
context.lineTo(180,150);
context.stroke();
//绘制2次贝塞尔曲线
context.beginPath();
context.moveTo(20,170);
context.quadraticCurveTo(130,40,180,150);
context.strokeStyle = "red";
context.stroke();
}&/script&&/body&&/html&
代码效果:
2、三次贝塞尔曲线
  bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)  //cp1x,cp1y表示第一个控制点的坐标,cp2x,cp2y表示第二个控制点的坐标,x,y表示终点的坐标;
数学公式表示如下:
P0、P1、P2、P3四个点在平面或在三维空间中定义了三次方贝兹曲线。曲线起始于P0走向P1,并从P2的方向来到P3。一般不会经过P1或P2;这两个点只是在那里提供方向资讯。P0和P1之间的间距,决定了曲线在转而趋进P3之前,走向P2方向的&长度有多长&。
代码实例:
代码如下:&!DOCTYPE html&&html&&head&&meta charset="utf-8"&&title&canvas直线&/title&&meta name="Keywords" content=""&&meta name="Description" content=""&&style type="text/css"&
body, h1{margin:0;}
canvas{margin: 20 }&/style&&/head&&body onload="draw()"&
&h1&三次贝塞尔曲线&/h1&
&canvas id="canvas" width=200 height=200 style="border: 1px solid #"&&/canvas&&script&
function draw() {
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
//绘制起始点、控制点、终点
context.beginPath();
context.moveTo(25,175);
context.lineTo(60,80);
context.lineTo(150,30);
context.lineTo(170,150);
context.stroke();
//绘制3次贝塞尔曲线
context.beginPath();
context.moveTo(25,175);
context.bezierCurveTo(60,80,150,30,170,150);
context.strokeStyle = "red";
context.stroke();
}&/script&&/body&&/html&
代码效果图:
是不是很炫酷的效果。。。HTML5+canvas真是个好玩的东西,上瘾了。
相关搜索:
相关阅读:
相关频道:
&&&&&&&&&&&&&&&&&&
HTML5最近更新用html5的canvas画布绘制贝塞尔曲线完整代码
来源:易贤网&& 阅读:171 次&&日期: 14:22:14
温馨提示:易贤网小编为您整理了“用html5的canvas画布绘制贝塞尔曲线完整代码”,方便广大网友查阅!
html5的canvas很强大利用其画布可轻松绘制贝塞尔曲线,为大家以后使用方便,特于此分享实现代码,有此需求的朋友可以参考下
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&title&用html5的canvas画布绘制贝塞尔曲线&/title&
&a href="/a/bjac/j77m9131.htm" target="_blank"&原文&/a&&/div&
&canvas id="keleyi_com" height="300" width="400"&&/canvas&
&script type="text/javascript"&
function draw(id)
var canvas=document.getElementById(id);
if(canvas==null)
var context=canvas.getContext('2d');
context.fillStyle="#eeeeff";
context.fillRect(0,0,400,300);
var dx=150;
var dy=150;
var s=100;
context.beginPath();
context.globalCompositeOperation='and';
context.fillStyle='rgb(100,255,100)';
context.strokeStyle='rgb(0,0,100)';
var x=Math.sin(0);
var y=Math.cos(0);
var dig=Math.PI/15*11;
for(var i=0;i&30;i++)
var x=Math.sin(i*dig);
var y=Math.cos(i*dig);
context.bezierCurveTo(dx+x*s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s);
context.closePath();
context.fill();
context.stroke();
draw("keleyi_com");
更多信息请查看
【】&&&&&【点此处查询各地各类考试咨询QQ号码及交流群】
易贤网手机网站地址:
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
相关阅读 & & &
&&& &nbsp&nbsp&nbsp会员注册
本站不参与评论!()
自觉遵守:爱国、守法、自律、真实、文明的原则
尊重网上道德,遵守中华人民共和国各项有关法律法规
严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的评论
承担一切因您的行为而直接或间接导致的民事或刑事法律责任
您在本站发表的评论,本站有权保留、转载、引用或者删除
参与本评论即表明您已经阅读并接受上述条款

我要回帖

更多关于 canvas三次贝塞尔曲线 的文章

 

随机推荐