WebFormDemo.css :
body
{
text-align:center;
}
div.round1
{
border:6px solid;
width:200px;
height:70px;
padding-top:30px;
margin:10px auto 5px auto;
border-radius:12px;
}
div.round2
{
border:6px solid red;
border-radius:40%; /*border-radius 属性允许您向元素添加圆角并定义它的形状*/
width:200px;
height:70px;
padding-top:30px;
margin:10px auto 5px auto;
}
.round
{
border-style: none;
background-color: #008080;
color:Yellow;
height: 40px;
border-radius:15px;
}
WebFormDemo.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebFormDemo.aspx.cs" Inherits="FirstWebApplication.S04.WebFormDemo" %>
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<link href="WebFormDemo.css" rel="stylesheet" type="text/css" />
<script src="DrawCanvas.js" type="text/javascript"></script>
</head>
<body>
<h2>在ASP.NET中使用HTML5</h2>
<canvas id="canvas1" width="800px" height="200px"></canvas>
<script>
DrawMyCanvas();
</script>
<div id="div1" class="round1" runat="server">
上面的图形是用Canvas绘制出来的，不是图像文件。
</div>
<form id="form1" runat="server">
<asp:Button CssClass="round" ID="Button1" runat="server" Text="改变div的内容和样式"
OnClick="Button1_Click" />
</form>
</body>
</html>
WebFormDemo.aspx.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace FirstWebApplication.S04
{
public partial class WebFormDemo : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
ViewState["style"] = true;
}
}
protected void Button1_Click(object sender, EventArgs e)
{
if ((bool)ViewState["style"] == true)
{
div1.Attributes["class"] = "round2";//改变div的类
div1.InnerText = "Hello";
ViewState["style"] = false;
}
else
{
div1.Attributes["class"] = "round1";
div1.InnerText = "OK";
ViewState["style"] = true;
}
}
}
}
DrawCanvas.js:
function DrawMyCanvas()
{
var canvas1 = document.getElementById("canvas1");
var ctx = canvas1.getContext('2d');
// 定义渐变模拟天空
var sky = ctx.createLinearGradient(0, 0, 0, 500); /*定义从#00ABEB到white的渐变（从左向右），作为图形容器的填充样式：
x0 渐变开始点的 x 坐标
y0 渐变开始点的 y 坐标
x1 渐变结束点的 x 坐标
y1 渐变结束点的 y 坐标
*/
sky.addColorStop(0, "#00ABEB");
sky.addColorStop(0.5, "white");
sky.addColorStop(1, "white");
//定义渐变模拟太阳
/*
xStart, yStart 开始圆的圆心的坐标。
radiusStart 开始圆的直径。
xEnd, yEnd 结束圆的圆心的坐标。
radiusEnd 结束圆的直径。
*/
var sun = ctx.createRadialGradient(50, 50, 0, 50, 50, 50);
sun.addColorStop(0, "white");
sun.addColorStop(0.5, "white");
sun.addColorStop(1, "rgba(228,199,0,0)");
//定义渐变模拟云彩
var cloud = ctx.createRadialGradient(610, 150, 5, 670, 150, 125);
cloud.addColorStop(0, "white");
cloud.addColorStop(1, "grey");
// 绘制天空
ctx.fillStyle = sky;
ctx.fillRect(0, 0, 800, 250);
/*fillRect(0, 0, 800, 250)
x, y 矩形的左上角的坐标。
width, height 矩形的大小。
*/
// 绘制太阳
ctx.fillStyle = sun;
ctx.fillRect(0, 0, 100, 100);
// 绘制云彩
ctx.fillStyle = cloud;
ctx.beginPath();
/*x 圆的中心的 x 坐标。
y 圆的中心的 y 坐标。
r 圆的半径。
sAngle 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle 结束角，以弧度计。
counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。*/
ctx.arc(610, 150, 25, 9, Math.PI, true);
ctx.fill();
ctx.beginPath();
ctx.arc(640, 150, 30, 9, Math.PI, true);
ctx.fill();
ctx.beginPath();
ctx.arc(670, 150, 25, 9, Math.PI, true);
ctx.fill();
}