canvas
标签
canvas
是html5
新增标签,意为画布。- 属性:
width
andheight
,canvas
标签可以直接在标签上添加画布的宽和高,也可以在内部样式表中添加,不过这样会把画布拉伸。 canvas
有默认的大小为300px and 150px
。canvas
的背景色是透明色。canvas
画布坐标无限大,当前只是可是窗口。1234567891011121314151617181920212223//首先获取`canvas`节点var mycanvas=document.getElementById("mycanvas");//获取`canvas`画布的上下文var ctx=mycanvas.getContext("2d");//新建一个路径(图层)ctx.beginPath();//画笔的起始点坐标ctx.moveTo(10,10);//画笔的终点坐标ctx.lineTo(100,100);//对所画线条进行设置线条颜色ctx.strokeStyle="red";//还能设置线宽ctx.lineWidth=30;//对所画的线条进行渲染ctx.stroke();//`当你画的是一个闭合图形时可以填充颜色`ctx.fillStyle="lightgray";ctx.fill();//但你花了三个点坐标,需要把这些点闭合时,使用ctx.closePath();//为画布设置透明色(0--1之间的小数),单独线条的颜色可以用`rgba()`单独设置ctx.globalAlpha=0.5;
画直线
|
|
画矩形
- 画矩形有三种方式123456789101112131415161718192021222324//`方法一`ctx.beginPath();// `四个参数分别是:开始的坐标,后两个是要画矩形的长和宽`ctx.fillRect(10,10,100,50);//`方法二`ctx.beginPath();ctx.strokeRect(20,20,100,50);//`方法三`ctx.beginPath();ctx.rect(30,30 100,50);ctx.stroke();//到此效果与方法二相同ctx.fill();//到此效果与方法一相同//`方法四`ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(0,100);ctx.lineTo(100,100);ctx.lineTo(100,0);ctx.closePath();ctx.stroke();//到此效果与方法二相同ctx.fill();//到此效果与方法一相同
画圆
- 画圆涉及到
arc(圆心的坐标,半径,开始的角度,结束的角度,逆时针和顺时针(可选))
true逆时针
,false顺时针(默认)
12345//开始画圆ctx.beginPath();ctx.arc(100,100,100,0,Math.PI*2);ctx.stroke();//或者默认颜色填充ctx.fill();关于圆的坐标:
线性渐变与径向渐变
12345678//线性渐变//四个参数:开始横向渐变开始的坐标,结束横向渐变的坐标var grd=ctx.createLinearGradient(0,0,mycanvas.width,mycanvas.height);//`addColorStop("渐变总距离的百分比",颜色);`grd.addColorStop(0,"red");grd.addColorStop(0.5,"blue");grd.addColorStop(1,"pink");//例如一个矩形填充上面的颜色,效果如下:
123456789//径向渐变//参数:径向渐变圆心坐标和半径var grd=ctx.createRadialGradient(200,200,100,200,200,250);grd.addColorStop(0,"blue");grd.addColorStop(0.5,"yellow");grd.addColorStop(1,"red");ctx.fillStyle=grd;ctx.fillRect(0,0,mycanvas.width,mycanvas.height);//效果如下:
判断指定点是否在上下文图形上的方法isPointInPath(点的坐标)
创建矩形的方法中,方法一和方法二画的矩形不能用此方法判断
12345if(isPointInPath(10,10)){console.log("在此图形内");}else{console.log("不在图形内");}
文字设置
- 文字也可以设置颜色和渐变123456789101112131415//文字可以设置上下基准线ctx.textBaseline="middle";//文字可以设置左右基准线ctx.textAlign="center";//可以设置文字的基本样式ctx.font="20px bold Arial";var grd=ctx.createLinearGradient(0,0,100,100);grd.addColorStop(0,"blue");grd.addColorStop(0.5,"pink");grd.addColorStop(1,"red");ctx.fillStyle=grd;//参数:文字内容,左下角的基线坐标ctx.fillText("hello",100,100);//或者ctx.strokeText("hello",100,100);//效果如下:
拓展小练习
画象棋棋盘
- 画8行8列的黑白格,宽高50px123456789ctx.beginPath();for(var i=0;i<8;i+=2){for(var j=0;j<8;j+=2){ctx.fillStyle="black";ctx.fillRect(i*50,j*50,50,50);ctx.fillRect(i*50+50,j*50+50,50,50);}}//效果如图:
写字板
- 鼠标按下的同时鼠标移动画出移动线条,鼠标抬起,事件消失123456789101112131415161718mycanvas.onmousedown=function(e){var evObj=window.event || e;ctx.beginPath();var x=evObj.clientX-mycanvas.offsetLeft;var y=evObj.clientY-mycanvas.offsetTop;ctx.moveTo(x,y);mycanvas.onmousemove=function(e){var evObj=e.window.event || e;var x1=evObj.clientX-mycanvas.offsetLeft;var y1=evObj.clientY-mycanvas.offsetTop;ctx.lineTo(x1,y1);ctx.stroke="blue";}}document.onmouseup=function(){mycanvas.onmousemove=null;}//效果如下:
太极图
|
|