-
多邊形填充： context.fillStyle = "yellow"; context.fill();查看全部
-
創(chuàng)建Canvas： HTML： <canvas id="canvas"></canvas> JavaScrip： var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); 畫一條直線： 狀態(tài)設(shè)置： 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);//控制原點(diǎn)，原點(diǎn)會多次重疊且每次重疊以新重疊的原點(diǎn)為起點(diǎn) cxt.rotate(度數(shù)/180*Math.PI);//控制圖形旋轉(zhuǎn)角度 五角星的路徑函數(shù)； cxt.storke(); cxt.restore();//重置原點(diǎn)，使重疊原點(diǎn)全部失效查看全部
-
lineJoin 相交的效果 默認(rèn):miter 尖角、 bevel 斜接、 round 圓角. miterLimit 當(dāng)lineJoin屬性為miter時 內(nèi)角距離的最大值(線條實(shí)線的尖角和寬度外的線相夾角),超過的話將使用bevel.默認(rèn)為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);//添加事件 鼠標(biāo)點(diǎn)擊事件 }查看全部
-
function detect(event) { var x = event.clientX - canvas.getBoundingClientRect().left;//在當(dāng)前畫布上的位置 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))//判斷是否在繪制的路徑內(nèi) context.fillStyle = "red"; else context.fillStyle = "#058"; context.fill(); } }查看全部
-
context.textBaseLine = top/middle/bottom/alphabetic(default)/ideographic/hanging 是根據(jù)context.fillText(string,x,y)中的y值進(jìn)行上對齊、下對齊或居中的。后面三個分別表示拉丁文的垂直方向基準(zhǔn)線、日語中文等方塊字的垂直方向基準(zhǔn)線、印度文的垂直方向基準(zhǔn)線。 context.textAlign = left/middle/right 是根據(jù)context.fillText(string,x,y)中的x值進(jìn)行左對齊、右對齊或居中的。查看全部
-
font:font-variant normal (default) small-caps:對于小寫字母，大寫顯示。查看全部
舉報
0/150
提交
取消