canvas默认宽高是300*150px
<!DOCTYPE HTML><HTML lang="en"head> Meta charset="UTF-8"Title>canvas</style> .canvas{border:1px solID pink;} bodycanvas class="canvas">您的浏览器不支持canvascanvasHTML>
*** 作canvas
="canvas" ID> script> var canvas=document.getElementByID("canvas); ctxcanvas.getContext(2d);//上下文，绘图环境 ctx.moveto(0,); ctx.lineto(100); ctx.stroke(); >
修改canvas尺寸
wIDth="100" height="100">
此处有坑：
如果不直接在canvas上定义宽高，而是在CSS中定义
>.canvas{border:1px solID pink;wIDth:100px;height:100px;}
可以看到跟刚才的效果是不一样的！！！
打印canvas的宽高可以发现，依然是300*150，也就是说在CSS里设置的宽高并不是canvas的实际宽高
console.log(canvas.wIDth+","+canvas.height);
具体 *** 作过程就是：现在300*150的画布上进行绘图，等绘制完成后再按照100*100的比例进行缩放
因此，想要设置canvas的宽高，只能在HTML上直接写，或者在Js里定义
canvas.wIDth=100; canvas.height=100; console.log(canvas.wIDth+","+canvas.height);
以下是通过两种方式设置的样式的对比
wIDth200pxheight} .canvas2="canvas2"="canvas2" canvas.wIDth; canvas.height; console.log(canvas.wIDth+canvas.height); ctx.moveto(); ctx.stroke(); canvas2canvas2 ctx2canvas2.getContext( canvas2.wIDth200; canvas2.height; console.log(canvas2.wIDthcanvas2.height); ctx2.moveto(); ctx2.lineto(); ctx2.stroke(); >
canvas画直线
="600"="400"起点 ctx.lineto(在内存中绘制 ctx.stroke();真正绘制 >
以下又有新坑：
如果此时想要复制一条线，使用以下代码：
ctx.stroke();//绘制内存中存储的第一段线条 ctx.stroke();//绘制内存中存储的第一段和第二段线条 >
肉眼可见第一条线颜色比第二条线深
其实是因为第一条线被绘制了两次
所以正确的打开方式应该是：
绘制内存中存储的第一段和第二段线条 >
一个stroke即可
如果坚持要分两次单独绘制的话，就需要以下方案：
绘制内存中存储的第一段线条 ctx.beginPath();会把之前内存中的线条清空 ctx.moveto(绘制内存中存储的第二段线条 >
canvas画圆
上下文，绘图环境 .arc绘制()圆弧 第一个参数是圆心位置，第二个参数是半径 第三和四参数分别代表起始弧度和终止弧度，完整的圆就是0-2π 最后一个参数，true代表逆时针，false代表顺时针 ctx.arc(502*Math.PI,1)">true); ctx.strokeStyle#abcdef设置绘制颜色 ctx.stroke(); >
绘制矩形
.strokeRect绘制矩形 第一个参数是矩形左上角位置 300,100 第二个参数是矩形的宽高 200,100 ctx.strokeRect(300); >
strokeRect是封装好的，因此不需要再次stroke即可绘制
闭合路径
ctx.closePath();自动闭合路径绘制 >
填充与描边
ctx.fill();填充区域 >
fill同时也能闭合路径
ctx.linewidth5设置线条粗细 ctx.strokeStyleorange描边颜色 ctx.stroke(); ctx.fillStyle填充颜色填充 >
当使用半透明的填充色时，可以看到填充是沿着路径开始的，因此会有一半的线条宽度与填充色重合
10rgba(171,205,239,.5)>
矩形的填充和描边
ctx.fillStyle ctx.strokeRect(描边的矩形 ctx.fillRect(填充的矩形 >
圆的填充和描边
ctx.arc(); ctx.stroke(); ctx.fill(); >
总结
以上是内存溢出为你收集整理的canvas坐标体系+canvas画直线、矩形、圆全部内容，希望文章能够帮你解决canvas坐标体系+canvas画直线、矩形、圆所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）