-
font-style: normal(默认)/italic(斜体字)/oblique(倾斜字体) font-variant:normal(默认)/small-caps(只要在使用英文小写字母时才能看出区别，以一种小型的大写字母形式显示小写字母) font-weight:lighter/normal(默认)/bold/bolder,,也可以使用数字设置：100,200,300,400(默认),500,600,700(bold)，800,900 font-size:px(默认，如20px)/em(如2em)/百分比%(如150%)，也可以使用以下属性值进行设置：xx-small, x-small, medium, large, x-large, xx-large font-family:可以设置多种字体备选；支持@font-face；web安全字体查看全部
-
我也来一个，可以修改pol直接修改有多少个角的对称多边形 <script> window.onload = function(){ var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 800; var context = canvas.getContext("2d"); context.lineWidth=10; drawStar(context,150,300,400,400,0,7,18); }; function drawStar(cxt,r,R,x,y,rot,pol,angelStart){ cxt.beginPath(); for (var i=0;i<pol;i++){ cxt.lineTo(x+R*Math.cos((angelStart+(360/pol)*i-rot)/180*Math.PI),y-R*Math.sin((angelStart+(360/pol)*i-rot)/180*Math.PI)); cxt.lineTo(x+r*Math.cos((angelStart+360/(pol*2)+(360/pol)*i-rot)/180*Math.PI),y-r*Math.sin((angelStart+360/(pol*2)+(360/pol)*i-rot)/180*Math.PI)); } cxt.closePath(); cxt.stroke(); } </script>查看全部
-
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); } }查看全部
-
这个可以实现星星不重复 for (var i = 0; i < 100; i++) { var sum=0; var aStar={ R:Math.random()*10+10, x:Math.random()*460+20, y:Math.random()*460+20, a:Math.random()*360 } if (stars.length==0) { stars.push(aStar); console.log('x') } else{ //第二个以上的星星都要和数组stars里的星星进行比较，和数组里面全部的星星比较完后sum等于star.length，则证明aStar和所有已经存在的星星不重复，就push到数组 for (var i = 0; i < stars.length; i++) { if (Math.sqrt(Math.pow(aStar.x-stars[i].x,2)+Math.pow(aStar.y-stars[i].y,2))>aStar.R+stars[i].R) { sum++; }; if (sum==stars.length) { stars.push(aStar); };}; }; console.log("星星个数: "+stars.length) }; for (var i = 0; i < stars.length; i++) { drawStar(context,stars[i].R,stars[i].R/2,stars[i].x,stars[i].y,stars[i].a);};查看全部
-
五角星收缩探照灯3: function starPath(cxt){ cxt.beginPath(); for (var i = 0; i < 5; i++) { cxt.lineTo(Math.cos((18+i*72)/180*Math.PI), -Math.sin((18+i*72)/180*Math.PI)); cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5, -Math.sin((54+i*72)/180*Math.PI)*0.5); }; cxt.closePath(); } function updateIncrease(canvasWidth,canvasHeight){ if(searhLight.radius>500){ isIncrease=false; }else if(searhLight.radius<150){ isIncrease=true; } if(isIncrease) searhLight.radius+=5; else searhLight.radius-=5; }查看全部
-
五角星收缩探照灯1: <script type="text/javascript"> var searhLight={x:400,y:400,radius:200,vx:Math.random()*5+10,vy:Math.random()*5+10} var isIncrease=true;//星星放大 window.onload=function(){ var canvas=document.getElementById('canvas'); canvas.width=800; canvas.height=800; var context=canvas.getContext("2d"); setInterval(function(){ draw(context); updateIncrease(canvas.width,canvas.height); },40); }查看全部
-
圆形探照灯代码3： function starPath(cxt){ cxt.beginPath(); for (var i = 0; i < 5; i++) { cxt.lineTo(Math.cos((18+i*72)/180*Math.PI), -Math.sin((18+i*72)/180*Math.PI)); cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5, -Math.sin((54+i*72)/180*Math.PI)*0.5); }; cxt.closePath(); } function update(canvasWidth,canvasHeight){ searhLight.x+=searhLight.vx; searhLight.y+=searhLight.vy; if(searhLight.x-searhLight.radius <=0){ searhLight.vx=-searhLight.vx; searhLight.x=searhLight.radius; } if(searhLight.x+searhLight.radius>=canvasWidth){ searhLight.vx=-searhLight.vx; searhLight.x=canvasWidth-searhLight.radius; } if(searhLight.y-searhLight.radius<=0){ searhLight.vy=-searhLight.vy; searhLight.y=searhLight.radius; } if(searhLight.y+searhLight.radius>=canvasHeight){ searhLight.vy=-searhLight.vy; searhLight.y=canvasHeight-searhLight.radius; } }查看全部
-
圆形探照灯代码1： <script type="text/javascript"> var searhLight={x:400,y:400,radius:200,vx:Math.random()*5+10,vy:Math.random()*5+10} window.onload=function(){ var canvas=document.getElementById('canvas'); canvas.width=800; canvas.height=800; var context=canvas.getContext("2d"); setInterval(function(){ draw(context); update(canvas.width,canvas.height); },40); }查看全部
-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<canvas id="canvas" width="1024" height="768"></canvas>
<script>
var canvas = document.getElementById('canvas');
canvas.width = 800;
canvas.height = 800;
var ctx = canvas.getContext('2d');
fillMoon(ctx, 2, 400, 400, 300, 0);
function fillMoon(ctx, d, x, y, R, rot, fillColor = '#fb5') {
ctx.save();
ctx.translate(x, y);
ctx.rotate(rot * Math.PI / 180);
ctx.scale(R, R);
pathMoon(ctx, d);
ctx.fillStyle = fillColor;
ctx.fill();
ctx.restore();
}
function pathMoon(ctx, d) {
ctx.beginPath();
ctx.arc(0, 0, 1, Math.PI/2, 3*Math.PI/2, true);
ctx.moveTo(0, -1);
ctx.arcTo(d, 0, 0, 1, (Math.sqrt(1+d*d)) /d);
ctx.closePath();
}
function dis(x1, y1, x2, y2) {
return Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2));
}
</script>
</html>
查看全部 -
既有填充又有描边是先填充在描边，否则描边会被覆盖掉一半的宽度 比较好的代码书写顺序： 1、绘制图形的途径 2、绘制图形状态 3、绘制查看全部
-
var balls=[]; window.onload=function(){ var canvas=document.getElementById('canvas'); canvas.width=1200; canvas.height=800; var context=canvas.getContext("2d"); for (var i = 0; i < 50; i++) { var R=Math.floor(Math.random()*255); var G=Math.floor(Math.random()*255); var B=Math.floor(Math.random()*255); var radius=Math.random()*50+20; aBall={ color:"rgb("+R+","+G+","+B+")", radius:radius, x:Math.random()*(canvas.width-2*radius)+radius, y:Math.random()*(canvas.height-2*radius)+radius, vx:(Math.random()*5+5)*Math.pow(-1,Math.floor(Math.random()*100)), vy:(Math.random()*5+5)*Math.pow(-1,Math.floor(Math.random()*100)) } balls[i]=aBall; }; setInterval(function(){ drawcxt(context); update(canvas.width,canvas.height) },50); }查看全部
-
function drawcxt(cxt){ var canvas=cxt.canvas; cxt.clearRect(0,0,canvas.width,canvas.height); for (var i = 0; i < balls.length; i++) { cxt.globalCompositeOperation='xor'; 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; }; }; }查看全部
-
小结@高级内容 1、阴影 2、global:globalAlpha,globalCompositeOperation。 3、clip：剪辑区域【按照灯】 4、非零环绕原则，镂空：路径的方向很重要。 5、isPointInPath：点击检测。查看全部
-
arcTo(x1,y1,x2,y2,radius);查看全部
举报
0/150
提交
取消