满意答案

dcebd7a0de6265b6ccae5ead692f1eab.png

wlgyd

2017.05.11

dcebd7a0de6265b6ccae5ead692f1eab.png

采纳率:41%    等级:10

已帮助:1868人

这个可以用canvas来画,先说最简单的一种 就是给一个盒子 加上边框

方法一:html部分写一个div

css 部分:div{

width:200px; //给200像素的宽

height:200px; //给200像素的高

border:1px solid #000; //给一个边框 颜色为黑色

background:transparent; // 给这个盒子一个透明的背景色

}

好了 ,这个是一个非常简单的 矩形盒子,不过通常都是用H5 的canvas来做的

方法二: html代码 ,创建canvas画布

您的浏览器不支持H5 canvas属性

然后就是js 部分了

var c=document.getElementById("myCanvas"); //获取canvas

var ctx=c.getContext("2d"); 创建一个2D 对象

ctx.beginPath(); //

ctx.lineWidth="6"; //线条宽度

ctx.strokeStyle="red"; //设置为黑色

ctx.rect(5,5,290,140); //创建矩形,起始点的x y坐标,和矩形宽高

ctx.stroke(); //绘制矩形(无填充) [有填充用 ctx.fill()]

也是可以直接写

var canvas=document.getElementById('myCanvas');

var ctx=canvas.getContext('2d');

ctx.fillStyle='#FF0000';

ctx.fillRect(0,0,80,100); //起始坐标和填充色

方法三:通过绘制路径来画矩形

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.moveTo(10,10); //起始点

cxt.lineTo(50,10); //结束点 同时也是下一个结束点的起始点

cxt.lineTo(50,50);

cxt.lineTo(10,50);

cxt.lineTo(10,10);

cxt.stroke();

00分享举报

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐