HTM5 Basic<1>
来源:互联网 发布:网络机顶盒哪款好 编辑:程序博客网 时间:2024/05/16 12:01
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();
}
- HTM5 Basic<1>
- HTM5规范
- htm5 特性
- HTM5:拖放
- BASIC 1
- Htm5 坦克大战
- HTM5之WEB Worker
- htm5笔记-web存储
- HTM5学习前篇
- htm5 本地存储
- htm5文件上传预览
- htm5 浏览器文件拖拽到本地
- htm5 基础函数的作用
- htm5 user-scalable 的意思
- GT Grid HTM5 博客参考
- cocos2d-htm5使用cocostudio 动画
- htm5实现网页定位特效
- 【LQ系列】BASIC-1~BASIC-5
- Vim 与系统剪切板交互
- java开发webservice的几种方法
- js字符串常用判断方法
- 各种问题
- Windows phone开发环境安装
- HTM5 Basic<1>
- iphone 开发杂文
- SQL 优化
- ORACLE 日期时间函数大全
- struts2出现at com.opensymphony.xwork2.util.FileManager$FileRevision.needsReloading(FileManager.java:20
- 面试算法之排序算法集锦
- 新浪微博OAuth2.0 VS OAuth1.0 主要区别总结
- 斐波那契数列的通项公式推导<两次构造等比数列>
- 经典面试题:链表的相交与环问题