-
数字的形式用二维数组查看全部
-
自己试了下，一定要加上display:block, 只加margin属性不能距中。查看全部
-
填充也会自动闭合查看全部
-
设置全局变量的好处是不同的函数之间的变量可以公用，减少函数参数的定义； 对比一下 var WINDOW_WIDTH=1024; var WINDOW_HEIGHT=768; var RADIUS=8; var MARGIN_TOP=60; var MARGIN_LEFT=30; //var restseconds=0; const endTime=new Date(2015,8,25,13,43,23); window.onload=function(){ var canvas=document.getElementById('canvas'); var context=canvas.getContext("2d"); canvas.width=WINDOW_WIDTH; canvas.height=WINDOW_HEIGHT; var restseconds=getCurShowTimeSeconds(); render(restseconds,context); }// JavaScript Document function getCurShowTimeSeconds() { var curTime=new Date(); var ret=parseInt((endTime.getTime()-curTime.getTime())/1000); return ret>=0?ret:0; } function render(rest,cxt){ var hours=parseInt(rest/3600); var minutes=parseInt((rest%3600)/60); var seconds=rest%60;查看全部
-
canvas详细图解》》进一步介绍了canvas的相关知识查看全部
-
点阵计算方式查看全部
-
本节内容核心2查看全部
-
renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), cxt);//parentInt(hours / 10)因为需要拆成两位数 renderDigit(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(hours % 10), cxt);//15 * (RADIUS + 1),一个数字的宽度，下面以此类推 renderDigit(MARGIN_LEFT + 30 * (RADIUS + 1), MARGIN_TOP, 10, cxt);//这里是冒号，这里的10或者parseInt(hours / 10)这些都是传入的索引，对应digit.js里面的数组，所以数组中第10个是冒号，冒号占的宽度是9查看全部
-
设圆的半径为R，圆与圆之间的间距为2px，所以圆所在的正方形格子的边长为2*（R+1）。 其中x表示起始的横坐标，y表示起始的纵坐标，i表示行数，j表示列数，因此： 第（i,j）个圆的圆心位置： CenterX：x+j*2*(R+1)+(R+1) CenterY：y+i*2*(R+1)+(R+1)查看全部
-
刚想学canvas就出了这个视频，不能更开心=￣ω￣=查看全部
-
<script> window.onload=function(){ var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.moveTo(100,100) context.lineTo(110,100) context.linWidth=5 context.stroke() context.fillStyle="red" context.fill()查看全部
-
HTML5 canvas讲解 JS接口查看全部
-
1, 弧形路劲绘制 context.beginPath(); context.arc( centerX,centerY,radius, //圆心坐标和半径 startingAngle,endingAngle, //起始弧度值结束弧度值 anticlockwise = false //绘制方向， false顺时针，true逆时针 ); //这个同样只是路劲的绘制 context.stroke(); // 线圆弧 这里的绘制没有context.closePath();表示绘制弧形首尾不用线段连接 context.fillStyle = "#005588"; //设置填充颜色 context.fill(); //根据路劲和设置的颜色进行填充，填充的话会自动把路劲首位相连然后填充查看全部
-
context.strokeStyle=color|gradient|pattern; //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。 context.fillStyle //填充颜色 context.fill()填充 beginPath() closePath() http://www.w3school.com.cn/tags/html_ref_canvas.asp //详细参数 http://www.w3school.com.cn/tags/canvas_strokestyle.asp //线性填充查看全部
-
var tangram=[ {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"green"}, {p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"red"}, {p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"yellow"}, {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"blue"}, {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"pink"}, {p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"black"}, {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"gray"} ]; window.onload=function(){ var canvas=document.getElementById('canvas'); var context=canvas.getContext('2d'); for(var i=0;i<tangram.length;i++){ draw(tangram[i],context); } } 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(); }查看全部
举报
0/150
提交
取消