HTML 5 Canvas

2020-03-24 17:19:14

字体：大中小

来源：转载

供稿：网友

getContext( 2d ) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面的两行代码绘制一个红色的矩形：

cxt.fill >fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。

通过指定从何处开始，在何处结束，来绘制一条线：
JavaScript 代码：
 script type= text/javascript var c=document.getElementById( myCanvas var cxt=c.getContext( 2d cxt.moveTo(10,10);cxt.lineTo(150,50);cxt.lineTo(10,50);cxt.stroke(); /script 
canvas 元素：
 canvas id= myCanvas width= 200 height= 100 >亲自试一试

通过规定尺寸、颜色和位置，来绘制一个圆：
JavaScript 代码：
 script type= text/javascript var c=document.getElementById( myCanvas var cxt=c.getContext( 2d cxt.fill >canvas 元素：
 canvas id= myCanvas width= 200 height= 100 >亲自试一试

使用您指定的颜色来绘制渐变背景：
JavaScript 代码：
 script type= text/javascript var c=document.getElementById( myCanvas var cxt=c.getContext( 2d var grd=cxt.createLinearGradient(0,0,175,50);grd.addColorStop(0, #FF0000 grd.addColorStop(1, #00FF00 cxt.fill >canvas 元素：
 canvas id= myCanvas width= 200 height= 100 >亲自试一试

把一幅图像放置到画布上：
JavaScript 代码：
 script type= text/javascript var c=document.getElementById( myCanvas var cxt=c.getContext( 2d var img=new Image()img.src= flower.png cxt.drawImage(img,0,0); /script 
canvas 元素：
 canvas id= myCanvas width= 200 height= 100 >亲自试一试
        郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。