-
1，路径的定义 context.moveTo(100,100); context.lineTo(700,700); 2，context。beginPath(); //开始绘制 context.closePath(); //结束绘制 具体的绘制，先定义绘制状态包括前面的绘制路劲和后面的绘制颜色等信息，然后调用具体方法进行绘制 1，context.lineWidth=5; //线条宽度设置 context.strockStyle = "#0058"; //线条颜色设置 context.stroke(); // 线条绘制 2，context.fillStyle = "rgb(2,100,100)"; //着色的颜色 然后调用 context.fill(); //填充颜色形成形状 3,由于是基于状态的绘制所以每一个绘制的路劲需要用context.beginPaht(),context.closePath();包裹，然后进行相关的实际绘制如context.strock();查看全部
-
1,canvas初始化 var canvas = document.getElementById("canvas"); //把页面的canvas标签取出来 var context = canvas.getContenxt("2d"); //调用getContext('2d');方法得到绘图环境；context绘图环境是真实的绘图需要的接口；2d代表2d绘图 2，其他方法 canvas.width = 1024; canvas.height = 768; 3，兼容判读 可以在html中写相关文本提醒不支持canvas，这些文本在支持canvas的浏览器中会自动忽略，不支持的浏览器显示文本； 可以用js语句判断： if(canvas.getContext("2d")){var context = canvas.getContext("2d")}else{alert('当前浏览器不支持Canvas,请更换浏览器后再试');} canvas提供的方法不多，后续绘图主要是利用canvas.getContext("2d");提供的环境下的方法查看全部
-
计算公式查看全部
-
function update(){ ball.vy+=ball.g; ball.x+=ball.vx; ball.y+=ball.vy; if (ball.y>600-ball.r) { ball.y=600-ball.r; if(Math.abs(ball.vy)>2) {ball.vy=-ball.vy*0.75;} else{ if(Math.abs(ball.vx)<0.2){ ball.vx=0; } else{ ball.vx=ball.vx>0?ball.vx-0.05:ball.vx+0.05; } } } if(ball.y<ball.r){ ball.y=ball.r; ball.vy=-ball.vy*0.75; } if(ball.x<ball.r){ ball.x=ball.r; ball.vx=-ball.vx*0.75; } if(ball.x>1300-ball.r){ ball.x=1300-ball.r; ball.vx=-ball.vx*0.75; } }查看全部
-
context.clearRect(x,y,width,height)刷新指定区域查看全部
-
实际绘制查看全部
-
实际绘制查看全部
-
绘制思路 第 (i,j) 个圆的圆心位置( i,j 从 0 开始)： CenterX : x + j*2*( R+1 )+( R+1 ) CenterY : y + i*2*( R+1 )+( R+1 )查看全部
-
renderDigit 倒计时绘制计算查看全部
-
倒计时初始化逻辑查看全部
-
Render a digit： 点阵化：数据结构是一个二维数[[],...[]]里的元素是0和1， 1：填成实心的圆 0：空白查看全部
-
绘制弧线： context.arc( centerx, //圆心的横坐标 centery, //圆心的纵坐标 radius, //圆弧的半径 startingAngle, //弧线从哪个弧度值开始 endingAngle, //弧线结束于哪个弧度值 anticlockwise = false //可选参数，描述绘制弧线是以顺时针（值为false,默认情况下），还是逆时针( anticlockwise = true ) )查看全部
-
初始化查看全部
-
改进性能查看全部
-
收拾收拾查看全部
举报
0/150
提交
取消