大佬教程收集整理的这篇文章主要介绍了HTML5之Canvas画正方形，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
HTML5之Canvas画正方形
1、设计源码
<!DOCTYPE html> <head> <Meta charset="utf-8" /> <title>HTML5之Canvas画正方形</title> <script type="text/javascript"> function drawFour(id) { //获取canvas元素 var canvas = document.getElementById("canvas"); if(canvas == null) return false; //获取上下文 var context = canvas.getContext('2d'); //设定填充图形的样式 context.fillStyle = "#EEEEFF"; //绘制图形 context.fillRect(0,800,800); context.fillStyle = "yellow"; //设定图形边框的样式 context.strokeStyle = "blue"; //指定线宽 context.lineWidth = 150; context.fillRect(50,50,500,500); context.strokeRect(50,500); } </script> </head> <body onLoad="drawFour('canvas')"> <canvas id="canvas" width="1200" height="560"/> </body>
3、分析说明
（1）获取Canvas元素
var canvas = document.getElementById("canvas");
（2）取到上下文
var context = canvas.getContext('2d');
（3）填充绘制边框
context.fillStyle = "#EEEEFF";//填充的样式
（4）设定绘图样式
strokeStyle：图形边框的样式
（5）指定线宽
context.lineWidth = 150;
（6）指定颜色值
（7）绘制正方形
以上是大佬教程为你收集整理的HTML5之Canvas画正方形全部内容，希望文章能够帮你解决HTML5之Canvas画正方形所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。