-
半径R 圆到边框的距离1 圆心到边框的距离R+1，正方形的边长2*（R+1） 遍历二维数组，i代表行数，j代表列数（i,j初始值是0） CenterX:x+j*2*(R+1)+(R+1) CenterY:y+i*2*(R+1)+(R+1)查看全部
-
digit.js存储二维点阵模型供countdown.js使用 digit.js 申明一个三维数组digit 0包含的是一个二维数组（0的二维点阵）...第十个位置是：对应的二维点阵 每一个数字的点阵表示是10*7大小的二维数组 ：是10*4大小的二维数组 countdown.js： 定义初始化——拿到canvas和context，给canvas大小赋值（两个全局变量）——绘制过程render（context）。 绘制canvas画布 function render(cxt){//绘制时钟，倒计时存储的具体数字 var hours=12 var minutes=34 var seconds=56 renderDigit（0,0，parseInt（hours/10）,cxt）//参数表示绘制数字的x坐标，绘制数字的y坐标，具体绘制那个数字,上下文绘图环境 } function renderDigit（x,y,num,cxt）{ cxt.fillStyle="rgb(0,102,153)"; for(var i=0;i<digit[num].length;i++){ for(var j=0;j<digit[num].i.length;i++){ if(digit[num][i]==1){ //绘圆球 } } } }查看全部
-
Render a digit： 点阵化：数据结构是一个二维数[[],...[]]里的元素是0和1， 1：填成实心的圆 0：空白查看全部
-
context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10) i=0,i<10 (i 0~9)角度 1/10,2/10,3/10...........10/10查看全部
-
七巧板 定义变量 tangram=[]，里面有七个部分（七巧板的七块） 每一个部分是类的对象：包括p（顶点坐标也是一个数组）和color 拿到canvas，定义canvas的宽和高 取得context 循环七巧板变量数组 遍历数组,每次遍历调用draw() draw(七巧板中的一块，绘图的上下文环境) function draw（piece，cxt）{ cxt.beginPath(); cxt.moveTo(piece.p[0].x,piece.p[0].y); for(var i=1;i<piece.p.length;i++){ cxt.lineTo(piece.p[i].x,piece.p[i].y) } cxt.closePath(); cxt.fillStyle=piece.color; cxt.fill(); }查看全部
-
画直线：context.moveTo(100,100)context.lineTo(700,700) context.lineTo(100,700) context.lineTo(100,100) context.fillStyle="rgb(2,100,30)" context.fill() context.lineWidth=5 context.strokeStyle="颜色" context.stroke() 基于状态的绘图：先设置绘图的状态再调用具体的函数进行绘制 画第二个图形 ：context.beginPath() context.closePath()查看全部
-
<canvas id="canvas" width="1024" height="768"></canvas> var canvas=document.getElementById("canvas") var context=canvas.getContext("2d") if(canvas.getContext("2d")){var context=canvas.getContext("2d") }else{}查看全部
-
http://img1.sycdn.imooc.com//55a8a79f0001646412800720-120-68.jpg查看全部
-
此处我使用const定义endTime，仍然可以为其赋值，留意一下。查看全部
-
closePath具有连接首尾的作用，且不必与beginPath成对出现。前者代表结束一段路径，后者表示开启新的路径。查看全部
-
卧槽 完全看不懂七巧板那一段的代码。。。。 数组和那种方式的代码 我很薄弱啊 求指路要去哪里补一补 或者在百度上搜索什么查看全部
-
beginpath和closepath可以不用成对出现查看全部
-
给canvas中规定大小的时候不能最好不要用到css中的方法，，这会影响到它的分辨率。查看全部
-
canvas是基于状态进行绘制的 每次路径的开始结束，需要调用context.beginPath()开始，绘制完成之后使用context.closePath()结束该路径，否则之前定义的路径将会依旧存在； 使用lineWidth设置线条宽度，strokeStyle设置线条颜色；fillStyle设置填充方式；context.fill()进行填充，stroke进行绘制查看全部
-
context.arc(centerx,centery,radius,startingAngel,endingAngel,anticlokwise=false); centerx和centery是圆心的x和y坐标， radius是圆的半径， startingAngel和endingAngel是弧度开始和弧度结束， anticlockwise,true是逆时针绘制，false是顺时针绘制查看全部
举报
0/150
提交
取消