-
本章小结 html <canvas id="canvas"></canvas> javascript var canvas=document.getElementById("canvas");<br> var txt=canvas.getContext("2d");<br> txt.moveTo() txt.lineTo() txt.beginPath()<br> txt.closePath()<br> txt.lineWidth=x; txt.fillStyle(); txt.strokeStyle(); <br> txt.fill(); txt.stroke(); txt.rect(x,y,width,height); txt.fillRect(x,y,width,height); txt.strokeRect(x,y,width,height);查看全部
-
矩形<br> cxt.moveTo(x,y)<br> cxt.lineTo(x+width,y)<br> cxt.lineTo(x+width,y+height)<br> cxt.lineTo(x,y+height)<br> <br> cxt.rect(x,y,width,height)查看全部
-
填充颜色的描边的图像，应该先填充颜色后描边，如果相反，会把边框覆盖一部分查看全部
-
填充 context.fillStyle="yellow";设置状态，也就是属性值 context.fill();填充，也就是方法 线条 context.strokeStyle="yellow";设置状态，也就是属性 context.sroke();绘制，也就是方法查看全部
-
context.beginPath() context.closePath() 配套使用，如果不适用context.closePath();合并时会因为线条的宽度导致一点瑕疵查看全部
-
beginPath();起始一条新的路径，或重置当前路径 moveTo();把路径移动到画布中的指定点，不创建线条 window.onload=function(){ var canvas=document.getElementById("canvas"); canvas.width=800; canvas.height=800; var context=canvas.getContext("2d"); context.lineWidth=10; context.beginPath(); context.lineTo(100,100); context.lineTo(200,200); context.lineTo(100,200); context.strokeStyle="#058"; context.stroke(); context.beginPath(); context.lineTo(300,300); context.lineTo(500,500); context.lineTo(300,500); context.strokeStyle="#000"; context.stroke(); context.beginPath(); context.lineTo(600,600); context.lineTo(700,700); context.lineTo(600,700); context.strokeStyle="#f00"; context.stroke(); }查看全部
-
html <canvas id="canvas"></canvas> javascript var canvas=document.getElementById("canvas"); var context=canvas.getContext("2d"); 绘图必备条件 context.moveTo(x,x)起点 context.lineTo(x,x)连线 context.lineWidth=x;线条宽度 context.strokeStyle="#000";线条颜色 设置状态 context.stroke();绘制查看全部
-
canvas图形库查看全部
-
五角星绘制算法查看全部
-
五角星坐标查看全部
-
五角星数学公式查看全部
-
矩形，水平垂直方向位移、倾斜、缩放等查看全部
-
transform和setTransform查看全部
-
变换矩阵查看全部
-
先填充代码再描边，反之则边框会被吃掉一半查看全部
举报
0/150
提交
取消