HTM5 Basic<1>
2013-09-12 09:51
211 查看
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();
}
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();
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 改善C++程序的建议:语法篇1<从C继承而来的特性>
- 关于Html5中<input type="number" name="points" min="1" max="10" />只能输入整数的问题
- re.sub(r'\*(.+?)\*',r'<em>\1</em>','pages of *World Wide Spam*,')的理解
- mysql dbi 操作<1>
- 程序设计第二次作业<1>
- 黑马程序员_<<GUI(图形用户界面)--------1>>
- Win7中使用Eclipse连接虚拟机中的Ubuntu中的Hadoop2.4<1>
- {学海无涯}【基于VTK的三维建模】——2.关于VTK对于CT建模的准备<1>
- XHTML学习<1>
- C++学习笔记之对文件的操作<1>
- 程序员_Java基础之<十>-IO流<1>
- JAVA多线程学习笔记<1>什么是线程
- MFC 学习之 界面美化<1>
- Ajax的异步通信引发的一个随机性问题<1>
- <1>拜耳阵列
- 算法导论笔记<1>
- 命令行操作<1>
- Java笔记3 多线程<1>线程概述、多线程的创建、多线程的安全问题、静态同步函数的锁、死锁
- 基于i.MX51的linux时钟体系分析<1>
- Android 室内定位系列:<1>地图构建