锐客网

  1. 首页 > 睿知 > it技术 > >

#yyds干活盘点# 2.1 HTML5 Canvas

IT知识canvas盘点

寸阳分阴须爱惜，休负春色与时光。这篇文章主要讲述#yyds干活盘点# 2.1 HTML5 Canvas相关的知识，希望能为你提供帮助。
< canvas> 标签定义图形，比如图标和其他图像，您必须使用脚本来绘制图形。
在画布上（Canvas）画一个红色矩形，渐变矩形，和一些彩色的文字。

#yyds干活盘点# 2.1 HTML5 Canvas

文章图片
frameborder="0"style="border:0; overflow:hidden; width:400px; height:120px; ">
< /iframe>
< /div>
Canvas-路径在Canvas上画线，我们将使用以下俩种方法：
  1. moveTo(x,y)定义线条开始坐标
  2. lineTo(x,y)定义线条结束坐标
绘制线条我们必须用到“ink”方法，就像stroke()
绘制线条实例定义开始坐标（0，0）和结束坐标（200，100）。然后使用stroke()方法来绘制线条：

JavaScript：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

在canvas中绘制圆形，我们将使用以下方法：
arc（x，y，r，start，stop）
实际上我们在绘制圆形时使用了“ink”的方法，比如stroke()或者fill()。
绘制圆形实例使用arc（）方法绘制一个圆：

JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();


Canvas-文本使用canvas绘制文本，重要的属性和方法如下：
  • font - 定义文字
  • fillText（text，x，y）- 在canvas上绘制实心的文本
  • strokeText（text，x，y）- canvas上绘制空心的文本
【#yyds干活盘点# 2.1 HTML5 Canvas】使用fillText（）；
绘制文本实例1使用“Arial”字体在画布上绘制一个搞30px的文字（实心）：

JavaScript：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);




使用strokeText();
绘制文本实例2使用“Arial”字体在画布上绘制一个高30px的文字（空心）：

JavaScript：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);




Canvas - 渐变渐变可以填充在矩形，圆形，线条，文本等等，各种形状可以自己定义不同的颜色。
以下由两种不同的方式来设置Canvas渐变：

  • createLinearGradient（x，y，x1，y1）- 创建线条渐变
  • createRadialGradient（x，y，x1，y1，r1）- 创建一个径向/圆渐变
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。
使用createLinearGradient():
线性渐变实例创建一个线性渐变。使用渐变填充矩形：

JavaScript：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);


使用createRadialGradient():径向/圆渐变实例创建一个径向/圆渐变。使用渐变填充矩形：

JavaScript：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 创建渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.

    推荐阅读


    上一篇：自定义biao

    下一篇：10.FastAPI响应体