HTML5之canvas-1画布矩形
Posted 李大白
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5之canvas-1画布矩形相关的知识，希望对你有一定的参考价值。
绘制步骤
获取canvas对象
var oCanvas = document.getElementById("canvas");
取得上下文context
var context = oCanvas.getContext("2d");
绘制图形
根据需求选择方法
绘制长方形/边框/填充色彩
Context.lineWidth=1;
Context.fillRect(x,y,width,height);
Context.strokeRect(x,y,width,height);
<html> <head> <meta charset="UTF-8"> <title>画布-矩形</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> </head> <body> <canvas id="canvas" width="500" height="500"></canvas> <script type="text/javascript"> //必要的两个条件 //1.获取canvas对象 var oCanvas = document.getElementById("canvas"); //2.取得上下文context var context = oCanvas.getContext("2d"); //一.context做操作，绘制图形 //1.颜色，css样式 context.fillStyle= "#ededed"; //2.起点终点宽度高度，执行，fillRect填充矩形，有填充 context.fillRect(0,0,500,500); context.fillStyle = "red"; context.fillRect(50,50,100,100); //边框，strokeRect无填充,strokeStyle默认黑色 context.strokeStyle = ‘#40bfe0‘; context.lineWidth = ‘4‘; //框的宽度，默认1 context.strokeRect(50,50,100,100); </script> </body> </html>
以上是关于HTML5之canvas-1画布矩形的主要内容，如果未能解决你的问题，请参考以下文章