html canvas 左右控制,html canvas

Document

您的浏览器不支持canvas，请更新或更换浏览器。

您的浏览器不支持canvas

您的浏览器不支持canvas

//2.在js脚本中获取到canvas元素

varcanvas=document.getElementById('myCanvas');//判断getContext()方法是否存在，来检测浏览器是否支持canvas==========================

if(canvas.getContext) {

alert("您的浏览器支持canvas");

}else{

alert("您的浏览器不支持canvas");

}//===============================================================================

//3.通过canvas的getContext()方法获取画布上下文，即创建context对象。以获取允许进行绘画的2D环境。 或者3D环境("3D")

varcontext=canvas.getContext("2d");//getContext("2d")该方法用于返回一个内建的h5对象，该对象提供了用于绘图的方法和属性，使用该对象可以在canvas画布中绘制图形。 相当于画笔。

//4.绘制图形的操作 =============================================================================================================

//绘制一个矩形，填充色为蓝色，矩形坐标为(10,10) 长50宽80。-------------------------------

context.fillStyle="blue";

context.fillRect(10,10,50,80);//strokeRect(x,y,width,height) clearRect(x, y, widh, height)：清除指定的矩形区域，然后这块区域会变的完全透明。

//循环生成若干个40px的小矩形，边框颜色随机-------------------------------------------------

functiondraw0(){varcanvas=document.getElementById('canvas2');if(!canvas.getContext)return;varctx=canvas.getContext("2d");for(vari= 0; i< 6; i++){//6行6列

for(varj= 0; j< 6; j++){

ctx.fillStyle= "rgb(${randomInt(0, 255)},${randomInt(0, 255)},${randomInt(0, 255)})";//ctx.fillStyle = "rgb(randomInt(0, 255),randomInt(0, 255),randomInt(0, 255))";

ctx.strokeRect(j* 50, i* 50,40,40);//ctx.fillRect(j * 50, i * 50, 40, 40);

}

}

}

draw0();/**

返回随机的 [from, to] 之间的整数(包括from，也包括to) 颜色随机生成失败？？？？？？？？？？？？？？？？*/

functionrandomInt(from, to){returnparseInt(Math.random()*(to-from+ 1)+from);

}//绘制一条直线-------------------------------------------------

context.moveTo(0,0);

context.lineTo(200,30);

context.stroke();//绘制复杂图形--------使用绘制路径方法--------Math.sin()----Math.cos()------Math.PI------beginPath()---lineTo()----closePath()-----------

varn= 0;vardx= 150;vardy= 150;vars= 100;

context.beginPath();//开始一条路径 或重置当前路径

context.fillStyle= 'orange';//填充属性设置

context.strokeStyle= 'yellow';//边框样式

context.lineWidth= '1';//边框宽度

varx=Math.sin(0);//使用sin cos三角函数计算顶点坐标x,y

vary=Math.cos(0);vardig=Math.PI/ 15 * 11;//Math.PI返回的是圆周率 π

for(vari= 0;i<30;i++) {//表示30个点的连线

varx=Math.sin(i*dig);vary=Math.cos(i*dig);

context.lineTo(dx+x*s,dy+y*s);

}

context.closePath();//关闭路径

context.fill();//填充 默认填充黑色

context.stroke();//边框 默认黑色

//绘制圆形----------------beginPath()----arc()-----closePath()-------------------------------

//arc(x,y,r,sAngle,eAngle,counterclockwise);---x,y表示圆心坐标---r表示圆版半径---sAngle起始角【0】---eAngle结束角【2*Math.PI】---counterclockwise规定逆时针还是顺时针绘图(false顺时针，true逆时针)

context.fillStyle= "blue";//设置画笔填充颜色样式

context.strokeStyle= 'red';//设置边框颜色样式

context.strokeWidth= '2';

context.beginPath();//开始创建路径

context.arc(50,50,50,0,2*Math.PI,true);//圆心坐标(50,50) 半径50 逆时针旋转 从0°~360°

context.closePath();

context.fill();

context.stroke();//绘制14条弧形-------------------------0°表示水平线 +90°表示负y轴方向-----------------------------------------------------------

for(vari=0;i<15;i++) {

context.strokeStyle='red';

context.beginPath();

context.arc(10,300,i*10,0,Math.PI*3/2,true);//弧心坐标(0,300) 半径10*i 逆时针旋转0°~((1/2)π)° 逆时针旋转0°~90°

context.closePath();//从当前点到开始点的闭合路径操作

context.stroke();

}//绘制圆弧-------------通过使用控制点----arcTo(x1,y1,x2,y2,r);--控制点1坐标 控制点2坐标 圆弧半径----------------------------------------

context.beginPath();

context.moveTo(150,150)//起点坐标

context.arcTo(200,150,200,250,60);//arcTo表示绘制的图形由两条切换所决定。l1为起始点和控制点1的直线，l2为控制点1和控制点2的直线

context.lineTo(250,250);//到达的下一点的坐标

context.stroke();//绘图

context.fill();//填充

//绘制路径------------------------路径都是闭合的----------------------------------

functiondraw1() {

context.fillStyle="orange";

context.beginPath();//新建一条路径

context.moveTo(10,10);//将画笔移动到指定坐标

context.lineTo(200,50);

context.lineTo(10,50);

context.closePath();//闭合

context.stroke();//绘制路径

context.fill();//填充闭合区域

}

draw1();//透明度 Transparency(0.0,1.0) globalAlpha = transparencyValue; 如果不是大量需要设置透明度，用rgba就够了

//lineWidth 线条宽度

//lineCap = type 线条末端样式 butt--末端以方形结束 round--末端以圆形结束 square--末端以方形结束，但两端都增加了一个长度为线宽一半的矩形区域

//lineJoin=type 线条接合处样式 round--弧形 bevel--接合处以横线为底 miter(默认)--接合处延申相连部分的外边缘，形成灵性

functiondraw3(){varcanvas=document.getElementById('tutorial');if(!canvas.getContext)return;varctx=canvas.getContext("2d");varlineJoin=['round','bevel','miter'];

ctx.lineWidth= 20;for(vari= 0; i

ctx.lineJoin=lineJoin[i];

ctx.beginPath();

ctx.moveTo(50,50 +i* 50);

ctx.lineTo(100,100 +i* 50);

ctx.lineTo(150,50 +i* 50);

ctx.lineTo(200,100 +i* 50);

ctx.lineTo(250,50 +i* 50);

ctx.stroke();

}

}

draw3();