JavaScript基础——使用Canvas绘图

最近在学习Canvas画图的方法，最近有时间做了个整理，如下：

1、基本用法

要使用元素，必须先设置其width和height属性，指定可以绘图的区域大小，出现在开始后结束标签中的内容是后备信息，如果浏览器不支持元素，就会显示这些信息。例如：

rush:js;">

使用toDataURL()方法，可以导出在元素上绘制的图像。

rush:js;"> var drawing=document.getElementById("drawing"); //确定浏览器支持元素 if(drawing.getContext){ //取得绘图上下文对象的引用，“2d”是取得2D上下文对象 var context=drawing.getContext("2d"); //取得图像的数据URI var imgurI=drawing.toDataURL("image/png"); alert(imgurI); //显示图像 var image=document.createElement("img"); image.src=imgurI; document.body.appendChild(image); }

2、2D上下文

（1）、填充和描边

填充：用指定的样式填充图形；描边：就是只在图形的边缘画线。fillStyle和strokeStyle两个属性的值可以是字符串、渐变对象或模式对象。

rush:js;"> var drawing=document.getElementById("drawing"); //确定浏览器支持元素 if(drawing.getContext){ //取得绘图上下文对象的引用，“2d”是取得2D上下文对象 var context=drawing.getContext("2d");

rush:js;"> 显示 context.strokeStyle="#0000ff"; context.fillStyle="red"; }

（2）、绘制矩形

矩形是唯一一种可以直接在2D上下文绘制的形状。与矩形有关的方法包括：fillRec()、strokeRect()和clearRect()。这三个方法都能接收4个参数：x坐标、y坐标、宽度和高度。

rush:xhtml;">

下面为使用toDataURL()方法，导出在canvas元素上绘制的图像程序如下：

rush:js;">

下面为使用toDataURL()方法，导出在canvas元素上绘制的图像。

（3）、绘制路径

要绘制路径，首先必须调用beginPath()方法，表示要开始绘制新路径。

rush:js;">

rush:js;">

（4）、绘制文本

绘制文本主要有两个方法：fillText()和strokeText()。这两个方法接收4个参数：要绘制的文本字符串、x坐标，y坐标和可选的最大像素宽度。这两个方法有三个属性：font、textAlign和textBaseline。

rush:js;">

（5）、变换

rush:js;">

（6）、绘制图像

rush:js;"> var drawing=document.getElementById("drawing"); //确定浏览器支持元素 if(drawing.getContext){ //取得绘图上下文对象的引用，“2d”是取得2D上下文对象 var context=drawing.getContext("2d"); var image=document.getElementById("image"); context.drawImage(image,20,20);//起点为(10,10)，图像大小会变成20x20像素； }

（7）、阴影

rush:js;">

（8）、渐变

渐变由CanvasGradient实例表示，很容易通过2D上下文来创建和修改。要创建一个新的先行渐变，可以调用createLinearGradient()方法。这个方法接收4个参数：起点的x坐标，起点的y坐标，终点的x坐标，终点的y坐标。创建渐变对象后，下一步就是使用addColorStop()方法来指定色标，这个方法接收两个参数：色标位置和css颜色值。色标位置是一个0（开始的颜色）到1（结束的颜色）之间的数据。

rush:js;">

为了确保渐变与形状对齐，有时候可以考虑使用函数来确保坐标合适，例如：

rush:js;"> function createRectLinearGradient(context,height){ return context.createLinearGradient(x,x+width,y+height); }

rush:js;">

要创建径向渐变（或放射渐变），可以使用createradialGradient()方法，这个方法接收6个参数，对应着两个圆的圆心和半径，

rush:js;">

（9）、模式

模式其实就是重复的图像，可以用来填充或描边图形

rush:js;"> var drawing=document.getElementById("drawing"); //确定浏览器支持元素 if(drawing.getContext){ //取得绘图上下文对象的引用，“2d”是取得2D上下文对象 var context=drawing.getContext("2d"); var image=document.images[0]; pattern=context.createPattern(image,"repeat"); context.fillStyle=pattern; context.fillRect(10,150,150); }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。