canvas绘制矩形
HTML5的canvas绘制矩形
直接上代码演式：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> canvas{ background: dodgerblue; } </style> </head> <body> <!--canvas相当于一块画板--> <canvas id="nntt" width="800" height="500"></canvas> <script type="text/javascript"> // 获得画板 通过ID捉到它 var nntt = document.getElementById("nntt"); // 获得绘画环境 // '2d'平面的绘画环境画布 var cv = nntt.getContext('2d'); // 指定颜色放前面 // cv.fillStyle = '#DB7093'; // 绘制一个填充矩形 // 这里有的是cv 图片里的是context.fillRect 前面这个可以自已命名的 //绘制开始从左边200,上面100开始.宽度260,高度199 但绘制出来是没有指定颜色默认的黑色。 // cv.fillRect(200,100,260,199); //绘制指定颜色 context.fillStyle= 'red' //指定填充颜色 绘制颜色要放在前面，否则不显示颜色的 //cv.fillStyle = '#DB7093'; //指定线条粗细 cv.lineWidth=10; // 绘制指定线条颜色 cv.strokeStyle = '#DB7093'; // 绘制矩形空心的(无填充) cv.strokeRect(200,100,260,199); </script> </body> </html> 上面代码效果图片：
原文链接：https://www.qiquanji.com/post/7656.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。