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