首页 > 代码库 > HTML5之canvas-1画布矩形
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画布矩形
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。