标签：渐变 ctx 50 基本功能 HTML5 var 100 grd
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <script>
7 document.createElement("myHero")//JS语句document.createElement("myHero")为IE浏览器添加了新的元素标签，直接自定义设置元素标签的格式
8 </script>
9 <style>
10 myHero {
11 display: block;
12 background-color: #dddddd;
13 padding: 50px;
14 font-size: 30px;
15 }
16 </style>
17 </head>
18 <body>
19 <hr>
20 <h1 style="text-align:center;">video视频网页播放</h1>
21 <video width="620" height="240" autoplay="autoplay" controls><!-- width 和 height 属性控制视频的尺寸-->
22 <source src="./video/movie.mp4" type="video/mp4">
23
24 你的浏览器不支持video标签
25 </video>
26 <hr>
27
28 <h1>我的第一个标签</h1>
29 <p>我的第一个段落</p>
30 <myHero>我的第一个新元素</myHero>
31 <hr>
32 <h1 style="text-align:center;">canvas画布上的简单操作</h1>
33 <img id="scream" src="img/timg.jpg" alt="美丽的图片" width="320" height="260"><br>
34 <canvas id="myCanvas" width="1080" height="500" style="border: 1px solid #000000"><!--指定一个ID属性，定义画布大小，style定义边框属性-->
35 </canvas>
36 <!--canvas元素本身没有绘图能力，绘制工作必须都在JavaScript内部完成-->
37 <script>
38 var c=document.getElementById("myCanvas");
39 var ctx=c.getContext("2d");
40 <!--绘制一个矩形-->
41 ctx.fillStyle="#FF0000";<!--设置风格，如：CSS颜色，渐变，图案等-->
42 ctx.fillRect(0,0,150,75);<!--fillRect(x,y,width,height)定义矩形的填充方式-->
43 <!--绘制线条-->
44 ctx.moveTo(0,0);<!--定义开始坐标-->
45 ctx.lineTo(200,100);<!--定义结束坐标-->
46 ctx.stroke();<!--使用stroke()方法绘制线条-->
47 <!--绘制一个圆-->
48 ctx.beginPath();
49 ctx.arc(195,50,40,0,2*Math.PI);<!--arc(x,y,r,start,stop)，xy表示在画布上的位置-->
50 ctx.stroke();
51 <!--绘制文本-->
52 ctx.font="30px Arial";
53 ctx.fillText("Hello World",320,50);<!--使用 "Arial" 字体在画布上绘制一个高 30px 的文字（实心）-->
54 ctx.strokeText("Hello World",320,100);<!--文字（空心）-->
55 //颜色渐变
56 //创建一个线性渐变。使用渐变填充矩形
57 var grd=ctx.createLinearGradient(0,0,200,0);
58 grd.addColorStop(0,"red");
59 grd.addColorStop(1,"white");
60 //填充渐变
61 ctx.fillStyle=grd;
62 ctx.fillRect(0,100,150,80);
63 //创建一个径向/圆渐变。使用渐变填充矩形：
64 var grd1=ctx.createRadialGradient(75,50,5,90,60,100);
65 grd1.addColorStop(0,"red");
66 grd1.addColorStop(1,"white");
67 // 填充渐变
68 ctx.fillStyle=grd1;
69 ctx.fillRect(200,100,150,80);
70 //把一幅图像放置到画布上
71 var img=document.getElementById("scream");
72 img.onload = function () {
73 ctx.drawImage(img,500,50);
74 }
75 </script>
76 <hr>
77 <h1 style="text-align:center;">数学公式</h1>
78 <math xmlns="http://www.w3.org/1998/Math/MathML">
79 <mrow>
80 <msub><mi>a</mi><mn>2</mn></msub>
81 <mo>+</mo>
82 <msub><mi>b</mi><mn>2</mn></msub>
83 <mo>=</mo>
84 <msub><mi>c</mi><mn>2</mn></msub>
85 </mrow>
86 </math>
87
88 <hr>
89 <h1 style="text-align:center;">Input 类型输入控制和验证</h1>
90 <form action="test01.html">
91 选择你喜欢的颜色：<input type="color" name="favcolor"><br>
92 生日：<input type="date" name="bday" value="2020-08-06"><br>
93 生日（日期和时间）：<input type="datetime" name="bdaytime"><br>
94 生日（日期和时间）：<input type="datetime-local" name="bdaytime1"><br>
95 生日（年月）：<input type="month" name="bdaymonth"><br>
96 选择时间：<input type="time" name="user_time"><br>
97 选择周：<input type="week" name="year_week"><br>
98 E-mail：<input type="email" name="user_email"><br><!--提交表单时，会自动验证Email域值是否合法有效-->
99 数量（1到5之间）：<input type="number" name="quantity" min="1" max="50" step="3"><br><!--step为输入域规定合法的数字间隔-->
100 滑动条Points：<input type="range" name="points" min="1" max="10"><br>
101 Search Google：<input type="search" name="googlesearch"><br>
102 添加你的主页：<input type="url" name="homepage">
103 <input type="submit">
104 </form>
105 <hr>
106 <h1 style="text-align:center;">填写并提交表单，然后重新刷新页面查看如何自动填充内容</h1>
107 <form action="test01.html" id="form1" autocomplete="on" method="get"><!--autocomplete自动填充内容-->
108 First name:<input type="text" name="fname" placeholder="First name"><br><!--placeholder简短的提示在用户输入值前会显示在输入域上-->
109 Last name:<input type="text" name="lname" autofocus><br><!--autofocus 属性规定在页面加载时，域自动地获得焦点，便于输入-->
110 E-mail:<input type="email" name="email" autocomplete="off" required><br><!--required规定必须在提交之前填写输入域（不能为空）-->
111 Country code：<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="请输入国家的字母代码"><br><!--正则表达式匹配多个数字\d+-->
112 选择图片：<input type="file" name="img" multiple>
113 <input type="submit"><br>
114 <input type="submit" formmethod="post" formnovalidate formaction="HTML5.html" value="使用POST，不验证，提交到不同位置"><br><!--formaction 属性会覆盖<form> 元素中的action属性-->
115 <input type="image" src="./img/timg.jpg" alt="Submit" width="48" height="48"><br>
116
117 </form>
118 <p>"备注"字段没有在form表单之内，但它也是form表单的一部分</p>
119 备注：<input type="text" name="remarks" form="form1">
120 <hr>
121 <h1 style="text-align:center;">规定输入域的选项列表</h1>
122 <form action="test01.html" method="post">
123 <input list="browsers" name="browser">
124 <datalist id="browsers">
125 <option value="IE"></option>
126 <option value="Chrome"></option>
127 <option value="Firefox"></option>
128 </datalist>
129 <input type="submit">
130 </form>
131 <hr>
132 <h1 style="text-align:center;">用于不同类型的输出，比如计算或脚本输出</h1>
133 <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
134 <input type="range" id="a" value="50">100
135 +<input type="number" id="b" value="50">
136 =<output name="x" for="a b"></output>
137 </form>
138 <hr><h1 style="text-align: center">图片对应的正上方或正下方加文字</h1>
139 <figure style="text-align: center">
140 <img src="./img/timg.jpg" alt="图片" width="304" height="228">
141 <figcaption>Fig.1 A view of the beautiful girl</figcaption>
142 </figure>
143
144
145
146
147
148 </body>
149 </html>
标签：渐变,ctx,50,基本功能,HTML5,var,100,grd 来源： https://www.cnblogs.com/chunfang/p/13456446.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。