1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 用html5的canvas画布绘制贝塞尔曲线

用html5的canvas画布绘制贝塞尔曲线

时间:2023-10-13 13:21:49

相关推荐

用html5的canvas画布绘制贝塞尔曲线

查看效果:/keleyi/phtml/html5/7.htm

完整代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>用html5的canvas画布绘制贝塞尔曲线-柯乐义</title></head><body><div><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)return false;var context=canvas.getContext('2d');context.fillStyle="#eeeeff";context.fillRect(0,0,400,300);var n=0;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");</script></body></html>

文本:/jihua/p/bseqx.html

原文:/a/bjac/j77m9131.htm

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。