Canvas绘图详解_技术笔记

论斤烤 2020-12-13

探照灯、聚光灯效果

截图
0赞 · 0采集
论斤烤 2020-12-11

clip绘制区域代码

截图
0赞 · 0采集
pinzaghi 2019-12-06

调用clip之后，绘制区域变成了裁剪的区域

截图
0赞 · 0采集
慕粉0058078966 2019-06-18

context.clip() 使用刚才绘制的路径把它剪切为当前的绘制环境

0赞 · 0采集
左小珍 2018-01-24

Canvas 绘图详解 8-3 clip和剪辑区域 context.clip() 使用刚才绘制的路径把它剪切为当前的绘制环境

截图
0赞 · 0采集
qq_简单点_14 2017-09-18

剪辑区域 context.clip();

截图
0赞 · 0采集
请叫我蜗牛小姐 2016-10-17

3....

截图
0赞 · 0采集
请叫我蜗牛小姐 2016-10-17

2.。。

截图
0赞 · 0采集
请叫我蜗牛小姐 2016-10-17

标记标记

截图
0赞 · 0采集
遵从我心 2016-10-06

剪辑区域clip

截图
0赞 · 0采集
思思_0003 2016-03-25

clip绘制遮罩

截图
0赞 · 0采集
lshzndx 2016-03-03

clip函数。表示将上面路径剪切为当前绘制环境

截图
0赞 · 0采集
慕设计3743538 2016-01-28

五角星收缩探照灯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; }

3赞 · 3采集
慕设计3743538 2016-01-28

五角星收缩探照灯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赞 · 1采集
慕设计3743538 2016-01-28

五角星收缩探照灯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赞 · 2采集
慕设计3743538 2016-01-28

圆形探照灯代码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; } }

3赞 · 2采集
慕设计3743538 2016-01-28

圆形探照灯代码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赞 · 0采集
慕设计3743538 2016-01-28

圆形探照灯代码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); }

3赞 · 3采集
TAMJING 2015-08-25

剪辑区域 context.clip() 路径规划

截图
0赞 · 4采集
小陆豪客02 2015-06-18

剪辑区域 context.clip() 路径规划

0赞 · 0采集
爱划水的獭拉 2014-12-02

clip的位置

截图
0赞 · 0采集

数据加载中...