-
圆形探照灯代码1： <script type="text/javascript"> var searhLight={x:400,y:400,radius:200,vx:Math.random()*5+10,vy:Math.random()*5+10} window.onload=function(){ var canvas=document.getElementById('canvas'); canvas.width=800; canvas.height=800; var context=canvas.getContext("2d"); setInterval(function(){ draw(context); update(canvas.width,canvas.height); },40); }查看全部
-
文本竖直对齐查看全部
-
文本对齐查看全部
-
font-variant small-cap将小写字母变成大写字母但字的大小不变查看全部
-
font 属性查看全部
-
文字渲染2 maxlen强制整个文字宽度为某一值查看全部
-
文字渲染查看全部
-
曲线绘制查看全部
-
绘制圆弧函数 arc函数根据传递的圆心的坐标，起始点终止点的坐标，半径来绘制 arcTo给出两条线段，以两条线段为切线绘制半径为radius的圆弧查看全部
-
贝塞尔三次曲线 http://tinyurl.com/html5bezier查看全部
-
贝塞尔曲线 context.moveTo(x0,y0); //起始点 context.quadraticCurveTo( x1, y1, x2, y2 ); //指定控制点（x1, y1）和终止点（x2, y2） x2,y2, //结束点查看全部
-
fillStyle和strokeStyle颜色的赋值，只要是css认可的颜色都可以传递查看全部
-
var balls=[]; window.onload=function(){ var canvas=document.getElementById('canvas'); canvas.width=1200; canvas.height=800; var context=canvas.getContext("2d"); for (var i = 0; i < 50; i++) { var R=Math.floor(Math.random()*255); var G=Math.floor(Math.random()*255); var B=Math.floor(Math.random()*255); var radius=Math.random()*50+20; aBall={ color:"rgb("+R+","+G+","+B+")", radius:radius, x:Math.random()*(canvas.width-2*radius)+radius, y:Math.random()*(canvas.height-2*radius)+radius, vx:(Math.random()*5+5)*Math.pow(-1,Math.floor(Math.random()*100)), vy:(Math.random()*5+5)*Math.pow(-1,Math.floor(Math.random()*100)) } balls[i]=aBall; }; setInterval(function(){ drawcxt(context); update(canvas.width,canvas.height) },50); }查看全部
-
function drawcxt(cxt){ var canvas=cxt.canvas; cxt.clearRect(0,0,canvas.width,canvas.height); for (var i = 0; i < balls.length; i++) { cxt.globalCompositeOperation='xor'; cxt.fillStyle=balls[i].color; cxt.beginPath(); cxt.arc(balls[i].x,balls[i].y,balls[i].radius,0,Math.PI*2) cxt.closePath(); cxt.fill(); }; }查看全部
-
function update(canvasWidth,canvasHeight){ for (var i = 0; i < balls.length; i++) { balls[i].x += balls[i].vx; balls[i].y += balls[i].vy; if (balls[i].x-balls[i].radius <= 0) { balls[i].vx=-balls[i].vx; balls[i].x=balls[i].radius; }; if (balls[i].x+balls[i].radius >= canvasWidth) { balls[i].vx=-balls[i].vx; balls[i].x=canvasWidth-balls[i].radius; }; if (balls[i].y-balls[i].radius <= 0) { balls[i].vy=-balls[i].vy; balls[i].y=balls[i].radius; }; if (balls[i].y+balls[i].radius >= canvasHeight) { balls[i].vy=-balls[i].vy; balls[i].y=canvasHeight-balls[i].radius; }; }; }查看全部
举报
0/150
提交
取消