HTML5-canvas

来源：互联网发布：淘宝客服与买家对话编辑：程序博客网时间：2024/06/08 10:43

canvas :
标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。
在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。

创建canvas：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Creat canvas</title></head><body><canvas id="mycanvas" width="200" height="100" style="border: 3px solid #000000">  </canvas></body></html>

结果：
这里写图片描述

这里只是单纯的一个画布，要想在里面绘制图形，需要使用脚本

<!DOCTYPE html><html><head><title> canvas </title></head><body><canvas id="mycanvas" width="200" height="100" style="border: 1px solid #000000"></canvas><script >var cx=document.getElementById('mycanvas');var cts=cx.getContext("2d");cts.fillStyle="#000000";cts.fillRect(0,0,150,75);    </script></body></html>

canvas实际上是一个二维网格，其中cts.fillRect(0,0,150,75)是从(0,0)到（150，75）的一个矩形区域
结果：
这里写图片描述

在canvas画布上画一条线路：

<!doctype html><html><head><title>Welcome canvas</title></head><body><canvas id="canvas" width="200" height="100" style="border: 5px solid #000000"></canvas><script>var c=document.getElementById('canvas');var ctx=c.getContext("2d");ctx.moveTo(0,0);ctx.lineTo(200,100);ctx.stroke();</script></body></html>

结果：
这里写图片描述

在canvas画布上绘制一个圆:

<!doctype html><html><head><title>Welcome canvas</title></head><body><canvas id="canvas" width="200" height="100" style="border: 5px solid #000000"></canvas><script>var c=document.getElementById('canvas');var ctx=c.getContext("2d");ctx.beginPath();ctx.arc(100,50,30,0,2*Math.PI);     //第一个数字和第二个数字为圆心所在的位置，第三个数字为半径，第四个和第五个数字分别是开始和结束位置ctx.stroke();</script></body></html>

结果：
这里写图片描述

在canvas画布中添加文本文字:

<!doctype html><html><head><title>Welcome canvas</title></head><body><canvas id="canvas" width="200" height="100" style="border: 5px solid #000000"></canvas><script>var c=document.getElementById('canvas');var ctx=c.getContext("2d");ctx.font="30px Arial";    //30px位文本文字的大小，Arial表示的是文本的字体ctx.fillText("hello html1",0,50);    //双引号内为文本内容，第一个数字为文   本最左边内容的位置即文本的开始位置，第二个数字为文本内容下边缘的位置ctx.strokeText("hello html2",50,100);  //fillText为实心字体，strokeText为空心字体</script></body></html>

结果：
这里写图片描述

canvas-渐变：

<!doctype html><html><head><title>Welcome canvas</title></head><body><canvas id="canvas" width="200" height="100" style="border: 5px solid #000000"></canvas><script>var c=document.getElementById('canvas');var ctx=c.getContext("2d");var grd=ctx.createLinearGradient(0,0,200,0);grd.addColorStop(0,"yellow");    //0->开始的颜色grd.addColorStop(1,"pink");      //1->渐变的颜色ctx.fillStyle=grd;ctx.fillRect(10,20,150,60);     //第一个和第二个数字分别为渐变区域左边界以及上边界离画布左、上边界的距离，第三个和第四个数字分别为渐变区域的长度和宽度</script></body></html>

结果：
这里写图片描述

0 0