H5--画表格

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>


<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>


<script>


var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(1,10,150,75);


</script>


</body>
</html>

首先,找到 <canvas> 元素:

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

然后,创建 context 对象:

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

getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面的两行代码绘制一个红色的矩形:

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

设置fillStyle属性可以是CSS颜色,渐变,或图案。fillStyle 默认设置是#000000(黑色)。

fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

canvas 是一个二维网格。

canvas 的左上角坐标为 (0,0)

上面的 fillRect 方法拥有参数 (0,0,150,75)。

意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。


转自:菜鸟教程

展开阅读全文

画表格

03-12

请教一下,用画笔画一张,像小学生的生字表格的网页;rn 如图示:外面一个正方形1.2X1.2CM,内有一个同心圆R=0.5CM,再内有一个同心正方形0.6CNX0.6CM,然后十字线交叉过大的正方形rn 我写了一段代码,如下,但没有实现效果。求纠正。rn[img=https://img-bbs.csdn.net/upload/201403/12/1394616023_378860.jpg][/img]rnrnrn Pen penEllipse;rn Pen penSquare;rn Pen penSquareB;rn Pen penLine;rn protected void Page_Load(object sender, EventArgs e)rn rn if (!IsPostBack)rn rn int width = 1000, hight = 600;rn Bitmap image = new Bitmap(width, hight);rn Graphics g = Graphics.FromImage(image);rn g.Clear(Color.Orange);rn for (int h = 1; h < 11; h++)rn rn for (int i = 1; i < 11; i++)rn rn if (penEllipse == null)rn rn penEllipse = new Pen(Color.Blue, 1);rn rnrn if (penSquare == null)rn rn penSquare = new Pen(Color.Red, 1);rn rn if (penLine == null)rn rn penLine = new Pen(Color.Gray, 1);rn rn if (penSquareB == null)rn rn penSquareB = new Pen(Color.Green, 1);rn rn rn int addEllipsewidth = 60 * i;rn int addEllipseheight = 60 * h;rnrn int addSquarewidth = 60 * i;rn int addSquareheight = 60 * h;rnrn g.DrawEllipse(penEllipse, addEllipsewidth, addEllipseheight, 60, 60);rn g.DrawRectangle(penSquare, addSquarewidth, addSquareheight, 70,70);rn if (i == 1)rn rn g.DrawLine(penLine, addSquareheight+35, 70, 70, 70);rn rnrn if (h == 1)rn rn g.DrawLine(penLine, 70, addSquareheight+35, 70, 70);rn rnrn g.DrawRectangle(penSquareB, addSquarewidth, addSquareheight, 40, 40);rn System.IO.MemoryStream ms = new System.IO.MemoryStream();rn image.Save(ms, System.Drawing.Imaging.ImageFormat.Gif);rn Response.ClearContent();rn Response.ContentType = "iamge/Gif";rn Response.BinaryWrite(ms.ToArray());rn rn rn rn rn 论坛

没有更多推荐了,返回首页