ikkhksvu 发表于 2024-6-29 18:34:18

【HTML5】


    <h2 style="color: black; text-align: left; margin-bottom: 10px;">概览</h2>HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。HTML5 是专门为承载丰富的 web 内容而设计的，并且<span style="color: black;">没</span>需额外插件。HTML5 是跨平台的，被设计为在<span style="color: black;">区别</span>类型的硬件（PC、平板、手机、电视机等等）之上运行。<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">有些</span>新元素</h2>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">Canvas</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">标签定义图形，<span style="color: black;">例如</span>图表和其他图像。该标签基于 JavaScript 的绘图 API，画布是一个矩形区域，您<span style="color: black;">能够</span><span style="color: black;">掌控</span>其每一像素。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">【快速尝试】</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1、创建</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">&lt;</span><span style="color: black;">canvas</span> <span style="color: black;">id</span><span style="color: black;">=</span><span style="color: black;">"myCanvas"</span> <span style="color: black;">width</span><span style="color: black;">=</span><span style="color: black;">"200"</span> <span style="color: black;">height</span><span style="color: black;">=</span><span style="color: black;">"100"</span><span style="color: black;">&gt;&lt;/</span><span style="color: black;">canvas</span><span style="color: black;">&gt;</span></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2、<span style="color: black;">经过</span>JsvaScript绘制</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">let</span> <span style="color: black;">c</span><span style="color: black;">=</span><span style="color: black;">document</span><span style="color: black;">.</span><span style="color: black;">getElementById</span><span style="color: black;">(</span><span style="color: black;">"myCanvas"</span><span style="color: black;">);</span>
      <span style="color: black;">let</span> <span style="color: black;">ctx</span><span style="color: black;">=</span><span style="color: black;">c</span><span style="color: black;">.</span><span style="color: black;">getContext</span><span style="color: black;">(</span><span style="color: black;">"2d"</span><span style="color: black;">);</span>
      <span style="color: black;">ctx</span><span style="color: black;">.</span><span style="color: black;">fillStyle</span><span style="color: black;">=</span><span style="color: black;">"#87CEFA"</span><span style="color: black;">;</span>
      <span style="color: black;">ctx</span><span style="color: black;">.</span><span style="color: black;">fillRect</span><span style="color: black;">(</span><span style="color: black;">0</span><span style="color: black;">,</span><span style="color: black;">0</span><span style="color: black;">,</span><span style="color: black;">150</span><span style="color: black;">,</span><span style="color: black;">75</span><span style="color: black;">);</span>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">【<span style="color: black;">仔细</span>介绍】</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1、坐标系</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">canvas 是一个二维网格，canvas 的左上角坐标为 (0,0)。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-6319e48cd4d6fcd4a4a7c60d90b5b390_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>canvas坐标系<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2、路径</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">办法</span>：</p>moveTo(x,y) 定义线条<span style="color: black;">起始</span>坐标（将画笔悬空移动至某点位）；lineTo(x,y) 定义线条结束坐标（绘制）；<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">let</span> <span style="color: black;">c</span><span style="color: black;">=</span><span style="color: black;">document</span><span style="color: black;">.</span><span style="color: black;">getElementById</span><span style="color: black;">(</span><span style="color: black;">"myCanvas"</span><span style="color: black;">);</span>
      <span style="color: black;">let</span> <span style="color: black;">ctx</span><span style="color: black;">=</span><span style="color: black;">c</span><span style="color: black;">.</span><span style="color: black;">getContext</span><span style="color: black;">(</span><span style="color: black;">"2d"</span><span style="color: black;">);</span>
      <span style="color: black;">//绘制线
      </span><span style="color: black;">ctx</span><span style="color: black;">.</span><span style="color: black;">moveTo</span><span style="color: black;">(</span><span style="color: black;">0</span><span style="color: black;">,</span><span style="color: black;">0</span><span style="color: black;">);</span>
      <span style="color: black;">ctx</span><span style="color: black;">.</span><span style="color: black;">lineTo</span><span style="color: black;">(</span><span style="color: black;">200</span><span style="color: black;">,</span><span style="color: black;">100</span><span style="color: black;">);</span>
      <span style="color: black;">ctx</span><span style="color: black;">.</span><span style="color: black;">stroke</span><span style="color: black;">();</span>
      <span style="color: black;">//绘制圆 arc(x,y,r,start,stop)
      </span><span style="color: black;">ctx</span><span style="color: black;">.</span><span style="color: black;">beginPath</span><span style="color: black;">();</span>
      <span style="color: black;">ctx</span><span style="color: black;">.</span><span style="color: black;">arc</span><span style="color: black;">(</span><span style="color: black;">95</span><span style="color: black;">,</span><span style="color: black;">50</span><span style="color: black;">,</span><span style="color: black;">40</span><span style="color: black;">,</span><span style="color: black;">0</span><span style="color: black;">,</span><span style="color: black;">2</span><span style="color: black;">*</span><span style="color: black;">Math</span><span style="color: black;">.</span><span style="color: black;">PI</span><span style="color: black;">);</span>
      <span style="color: black;">ctx</span><span style="color: black;">.</span><span style="color: black;">stroke</span><span style="color: black;">();</span>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3、文本</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">要紧</span>的属性和<span style="color: black;">办法</span></p>font - 定义字体fillText(text,x,y) - 在 canvas 上绘制实心的文本strokeText(text,x,y) - 在 canvas 上绘制空心的文本<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">let</span> <span style="color: black;">c</span><span style="color: black;">=</span><span style="color: black;">document</span><span style="color: black;">.</span><span style="color: black;">getElementById</span><span style="color: black;">(</span><span style="color: black;">"myCanvas"</span><span style="color: black;">);</span>
      <span style="color: black;">let</span> <span style="color: black;">ctx</span><span style="color: black;">=</span><span style="color: black;">c</span><span style="color: black;">.</span><span style="color: black;">getContext</span><span style="color: black;">(</span><span style="color: black;">"2d"</span><span style="color: black;">);</span>
      <span style="color: black;">ctx</span><span style="color: black;">.</span><span style="color: black;">font</span><span style="color: black;">=</span><span style="color: black;">"30px Arial"</span><span style="color: black;">;</span>
      <span style="color: black;">//实心文本
      </span><span style="color: black;">ctx</span><span style="color: black;">.</span><span style="color: black;">fillText</span><span style="color: black;">(</span><span style="color: black;">"Hello World"</span><span style="color: black;">,</span><span style="color: black;">10</span><span style="color: black;">,</span><span style="color: black;">50</span><span style="color: black;">);</span>
      <span style="color: black;">//空心文本
      </span><span style="color: black;">ctx</span><span style="color: black;">.</span><span style="color: black;">strokeText</span><span style="color: black;">(</span><span style="color: black;">"Hello World"</span><span style="color: black;">,</span><span style="color: black;">10</span><span style="color: black;">,</span><span style="color: black;">50</span><span style="color: black;">);</span>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">4、渐变</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">办法</span></p>createLinearGradient(x,y,x1,y1) - 创建线条渐变createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">let</span> <span style="color: black;">c</span><span style="color: black;">=</span><span style="color: black;">document</span><span style="color: black;">.</span><span style="color: black;">getElementById</span><span style="color: black;">(</span><span style="color: black;">"myCanvas"</span><span style="color: black;">);</span>
      <span style="color: black;">let</span> <span style="color: black;">ctx</span><span style="color: black;">=</span><span style="color: black;">c</span><span style="color: black;">.</span><span style="color: black;">getContext</span><span style="color: black;">(</span><span style="color: black;">"2d"</span><span style="color: black;">);</span>

      <span style="color: black;">// 创建渐变
      </span><span style="color: black;">let</span> <span style="color: black;">grd</span><span style="color: black;">=</span><span style="color: black;">ctx</span><span style="color: black;">.</span><span style="color: black;">createLinearGradient</span><span style="color: black;">(</span><span style="color: black;">0</span><span style="color: black;">,</span><span style="color: black;">0</span><span style="color: black;">,</span><span style="color: black;">200</span><span style="color: black;">,</span><span style="color: black;">0</span><span style="color: black;">);</span>
      <span style="color: black;">grd</span><span style="color: black;">.</span><span style="color: black;">addColorStop</span><span style="color: black;">(</span><span style="color: black;">0</span><span style="color: black;">,</span><span style="color: black;">"red"</span><span style="color: black;">);</span>
      <span style="color: black;">grd</span><span style="color: black;">.</span><span style="color: black;">addColorStop</span><span style="color: black;">(</span><span style="color: black;">1</span><span style="color: black;">,</span><span style="color: black;">"white"</span><span style="color: black;">);</span>

      <span style="color: black;">// 填充渐变
      </span><span style="color: black;">ctx</span><span style="color: black;">.</span><span style="color: black;">fillStyle</span><span style="color: black;">=</span><span style="color: black;">grd</span><span style="color: black;">;</span>
      <span style="color: black;">ctx</span><span style="color: black;">.</span><span style="color: black;">fillRect</span><span style="color: black;">(</span><span style="color: black;">10</span><span style="color: black;">,</span><span style="color: black;">10</span><span style="color: black;">,</span><span style="color: black;">150</span><span style="color: black;">,</span><span style="color: black;">80</span><span style="color: black;">);</span>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">5、图像</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">办法</span></p>drawImage(image,x,y)<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">let</span> <span style="color: black;">c</span><span style="color: black;">=</span><span style="color: black;">document</span><span style="color: black;">.</span><span style="color: black;">getElementById</span><span style="color: black;">(</span><span style="color: black;">"myCanvas"</span><span style="color: black;">);</span>
      <span style="color: black;">let</span> <span style="color: black;">ctx</span><span style="color: black;">=</span><span style="color: black;">c</span><span style="color: black;">.</span><span style="color: black;">getContext</span><span style="color: black;">(</span><span style="color: black;">"2d"</span><span style="color: black;">);</span>
      <span style="color: black;">let</span> <span style="color: black;">img</span><span style="color: black;">=</span><span style="color: black;">document</span><span style="color: black;">.</span><span style="color: black;">getElementById</span><span style="color: black;">(</span><span style="color: black;">"scream"</span><span style="color: black;">);</span>
      <span style="color: black;">ctx</span><span style="color: black;">.</span><span style="color: black;">drawImage</span><span style="color: black;">(</span><span style="color: black;">img</span><span style="color: black;">,</span><span style="color: black;">10</span><span style="color: black;">,</span><span style="color: black;">10</span><span style="color: black;">);</span>
    </div>




听听海 发表于 2024-9-2 23:54:24

外贸网站建设方法 http://www.fok120.com/
页: [1]
查看完整版本: 【HTML5】