-
绘图函数-绘制线条查看全部
-
创建Canvas绘图环境查看全部
-
鼠标点击圆变色2: function detect(event){ //鼠标点击在canvas中获取坐标的方法 x,y var x=event.clientX-canvas.getBoundingClientRect().left; var y=event.clientY-canvas.getBoundingClientRect().top; for (var i = 0; i < balls.length; i++) { context.beginPath(); context.arc(balls[i].x,balls[i].y,balls[i].r,0,Math.PI*2); if(context.isPointInPath(x,y)){ context.fillStyle='red'; context.fill(); } }; }查看全部
-
鼠标点击圆变色1: var balls=[]; var canvas=document.getElementById('canvas'); var context=canvas.getContext("2d"); window.onload=function(){ canvas.width=800; canvas.height=800; for (var i = 0; i < 10; i++) { var aball={ x:Math.random()*canvas.width, y:Math.random()*canvas.height, r:Math.random()*50+20 } balls[i]=aball; }; draw(); canvas.addEventListener('mouseup',detect); //鼠标点击 } function draw(){ //随机画圆 for (var i = 0; i < balls.length; i++) { context.beginPath(); context.arc(balls[i].x,balls[i].y,balls[i].r,0,Math.PI*2); context.fillStyle='#058'; context.fill(); }}查看全部
-
鼠标移入圆形变色2: function detect(event){ //鼠标点击在canvas中获取坐标的方法 x,y var x=event.clientX-canvas.getBoundingClientRect().left; var y=event.clientY-canvas.getBoundingClientRect().top; draw(x,y) }查看全部
-
鼠标移入圆形变色1: var balls=[]; var canvas=document.getElementById('canvas'); var context=canvas.getContext("2d"); window.onload=function(){ canvas.width=800; canvas.height=800; for (var i = 0; i < 10; i++) { var aball={ x:Math.random()*canvas.width, y:Math.random()*canvas.height, r:Math.random()*50+20 } balls[i]=aball; }; canvas.addEventListener('mousemove',detect); //鼠标移入} function draw(x,y){ //随机画圆 context.clearRect(0,0,canvas.width,canvas.height); for (var i = 0; i < balls.length; i++) { context.beginPath(); context.arc(balls[i].x,balls[i].y,balls[i].r,0,Math.PI*2); if (context.isPointInPath(x,y)) context.fillStyle='red' else context.fillStyle='#058'; context.fill(); }; }查看全部
-
正方形例子： context.beginPath(); context.rect(100,100,600,600); PathRect(context,200,200,400,200); pathTriangle(context,300,450,150,650,450,650); context.arc(550,550,100,0,Math.PI*2,true) context.fillStyle='#058'; context.shadowColor='gray'; context.shadowOffsetX=5; context.shadowOffsetY=5; context.shadowBlur=10; //阴影模糊程度 context.fill(); context.closePath(); function PathRect(cxt,x,y,width,height){ cxt.moveTo(x,y); cxt.lineTo(x,y+height); cxt.lineTo(x+width,y+height); cxt.lineTo(x+width,y); cxt.lineTo(x,y); } function pathTriangle(cxt,x1,y1,x2,y2,x3,y3){ cxt.moveTo(x1,y1); cxt.lineTo(x2,y2); cxt.lineTo(x3,y3); cxt.lineTo(x1,y1); }查看全部
-
//非零环绕原则 context.beginPath(); //圆环 context.arc(100,100,100,0,Math.PI*2,false); context.arc(100,100,50,0,Math.PI*2,true); context.fillStyle='#058'; context.shadowColor='gray'; context.shadowOffsetX=5; context.shadowOffsetY=5; context.shadowBlur=10; //阴影模糊程度 context.fill(); context.closePath();查看全部
-
文字渲染查看全部
-
文本度量查看全部
-
五角星收缩探照灯3: function starPath(cxt){ cxt.beginPath(); for (var i = 0; i < 5; i++) { cxt.lineTo(Math.cos((18+i*72)/180*Math.PI), -Math.sin((18+i*72)/180*Math.PI)); cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5, -Math.sin((54+i*72)/180*Math.PI)*0.5); }; cxt.closePath(); } function updateIncrease(canvasWidth,canvasHeight){ if(searhLight.radius>500){ isIncrease=false; }else if(searhLight.radius<150){ isIncrease=true; } if(isIncrease) searhLight.radius+=5; else searhLight.radius-=5; }查看全部
-
五角星收缩探照灯2: function draw(cxt){ var canvas=cxt.canvas; cxt.clearRect(0,0,canvas.width,canvas.height); cxt.save(); cxt.beginPath(); cxt.fillStyle='black'; cxt.fillRect(0,0,canvas.width,canvas.height); cxt.save(); cxt.translate(searhLight.x,searhLight.y); // cxt.rotate(rot/180*Math.PI); 星星旋转角度 cxt.scale(searhLight.radius,searhLight.radius); starPath(cxt); cxt.fillStyle='#fff'; cxt.fill(); cxt.restore(); cxt.clip(); cxt.font='bold 150px Arial'; cxt.textAlign='center'; cxt.textBaseline='middle'; cxt.fillStyle='#058'; cxt.fillText('CANVAS',canvas.width/2,canvas.height/4); cxt.fillText('CANVAS',canvas.width/2,canvas.height/2); cxt.fillText('CANVAS',canvas.width/2,canvas.height*3/4); cxt.restore(); }查看全部
-
五角星收缩探照灯1: <script type="text/javascript"> var searhLight={x:400,y:400,radius:200,vx:Math.random()*5+10,vy:Math.random()*5+10} var isIncrease=true;//星星放大 window.onload=function(){ var canvas=document.getElementById('canvas'); canvas.width=800; canvas.height=800; var context=canvas.getContext("2d"); setInterval(function(){ draw(context); updateIncrease(canvas.width,canvas.height); },40); }查看全部
-
圆形探照灯代码3： function starPath(cxt){ cxt.beginPath(); for (var i = 0; i < 5; i++) { cxt.lineTo(Math.cos((18+i*72)/180*Math.PI), -Math.sin((18+i*72)/180*Math.PI)); cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5, -Math.sin((54+i*72)/180*Math.PI)*0.5); }; cxt.closePath(); } function update(canvasWidth,canvasHeight){ searhLight.x+=searhLight.vx; searhLight.y+=searhLight.vy; if(searhLight.x-searhLight.radius <=0){ searhLight.vx=-searhLight.vx; searhLight.x=searhLight.radius; } if(searhLight.x+searhLight.radius>=canvasWidth){ searhLight.vx=-searhLight.vx; searhLight.x=canvasWidth-searhLight.radius; } if(searhLight.y-searhLight.radius<=0){ searhLight.vy=-searhLight.vy; searhLight.y=searhLight.radius; } if(searhLight.y+searhLight.radius>=canvasHeight){ searhLight.vy=-searhLight.vy; searhLight.y=canvasHeight-searhLight.radius; } }查看全部
-
圆形探照灯代码2： function draw(cxt){ var canvas=cxt.canvas; cxt.clearRect(0,0,canvas.width,canvas.height); cxt.save(); cxt.beginPath(); cxt.fillStyle='black'; cxt.fillRect(0,0,canvas.width,canvas.height); cxt.beginPath(); cxt.arc(searhLight.x,searhLight.y,searhLight.radius,0,Math.PI*2); cxt.fillStyle='#fff'; cxt.fill(); cxt.clip(); cxt.font='bold 150px Arial'; cxt.textAlign='center'; cxt.textBaseline='middle'; cxt.fillStyle='#058'; cxt.fillText('CANVAS',canvas.width/2,canvas.height/4); cxt.fillText('CANVAS',canvas.width/2,canvas.height/2); cxt.fillText('CANVAS',canvas.width/2,canvas.height*3/4); cxt.restore(); }查看全部
举报
0/150
提交
取消