-
多边形填充： context.fillStyle = "yellow"; context.fill();查看全部
-
创建Canvas： HTML： <canvas id="canvas"></canvas> JavaScrip： var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); 画一条直线： 状态设置： context.moveTo(100,100); context.moveTo(700,700); context.lineWidth = 10; context.strokeStyle = "#058"; 绘制： context.stroke()查看全部
-
context.arc(x,y,r,start,end,bool)查看全部
-
var grd=context.createLinearGradient(xstart,ystart,xend,yend); grd.addColorStop(stop,color); linearGrad.addColorStop(0.0,"#fff"); linearGrad.addColorStop(0.0,"#000");查看全部
-
Necel cxt.save();//保存 cxt.translate(x，y);//控制原点，原点会多次重叠且每次重叠以新重叠的原点为起点 cxt.rotate(度数/180*Math.PI);//控制图形旋转角度 五角星的路径函数； cxt.storke(); cxt.restore();//重置原点，使重叠原点全部失效查看全部
-
lineJoin 相交的效果 默认:miter 尖角、 bevel 斜接、 round 圆角. miterLimit 当lineJoin属性为miter时 内角距离的最大值(线条实线的尖角和宽度外的线相夹角),超过的话将使用bevel.默认为10.查看全部
-
图形需要边框时，先填充，再描边查看全部
-
代码还是自己敲一遍比较有感觉。查看全部
-
function draw(cxt) { var canvas = cxt.canvas; cxt.clearRect(0, 0, canvas.width, canvas.height); if(themeColor == "black") { // console.log("black"); cxt.fillStyle = "black"; cxt.fillRect(0, 0, canvas.width, canvas.height); } for (var i=0; i<balls.length; i++) { cxt.fillStyle = balls[i].color; cxt.beginPath(); cxt.arc(balls[i].x, balls[i].y, balls[i].radius, 0, Math.PI*2); cxt.closePath(); cxt.fill(); } }查看全部
-
function update(canvasWidth, canvasHeight) { for (var i=0; i<balls.length; i++) { balls[i].x += balls[i].vx; balls[i].y += balls[i].vy; if(balls[i].x - balls[i].radius <= 0){ balls[i].vx = -balls[i].vx; balls[i].x = balls[i].radius; } if(balls[i].x + balls[i].radius >=canvasWidth){ balls[i].vx = -balls[i].vx; balls[i].x = canvasWidth - balls[i].radius; } if(balls[i].y - balls[i].radius <= 0){ balls[i].vy = -balls[i].vy; balls[i].y = balls[i].radius; } if(balls[i].y + balls[i].radius >= canvasHeight){ balls[i].vy = -balls[i].vy; balls[i].y = canvasHeight - balls[i].radius; } } }查看全部
-
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("mousemove", detect);//添加事件 鼠标点击事件 }查看全部
-
function detect(event) { 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); draw(x, y); } }查看全部
-
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.textBaseLine = top/middle/bottom/alphabetic(default)/ideographic/hanging 是根据context.fillText(string,x,y)中的y值进行上对齐、下对齐或居中的。后面三个分别表示拉丁文的垂直方向基准线、日语中文等方块字的垂直方向基准线、印度文的垂直方向基准线。 context.textAlign = left/middle/right 是根据context.fillText(string,x,y)中的x值进行左对齐、右对齐或居中的。查看全部
-
font:font-variant normal (default) small-caps:对于小写字母，大写显示。查看全部
举报
0/150
提交
取消