JavaScript之使用Canvas绘图(一)

时间：2021-11-25 22:13:42
   HTML5最受欢迎的功能之一就是<canvas>元素，这个元素负责在页面中设定一个区域，然后就可以通过javascript动态地在这个区域中绘制图形。与浏览器的其他组件类似，<canvas>由几组API构成，但并非所有浏览器都支持所有这些API。除了具备基本绘图能力的2D上下文，<canvas>还建议了一个名为WebGL的3D上下文。

基本用法

    使用<canvas>元素必须先设置其width和height属性，指定可以绘图的区域大小。如果浏览器不支持<canvas>元素，就会显示写在<canvas></canvas>标签对之间的内容。例子：
<canvas id="myCanvas" width="400px" height="400px">此浏览器不支持canvas元素</canvas>;

要在此画布（canvas）上绘图，需要取得绘图上下文，调用getContent()方法来取得绘图上下文对象的引用。传入上下文的名字“2d”即可取得2D上下文对象。

var myCanvas=document.getElementById("myCanvas");
//确定浏览器支持<canvas>元素
if(myCanvas.getContext){
var context=myCanvas.getContext("2d");
//code
}
   使用toDataURL（）方法可以导出在<canvas>元素上绘制的图像，此方法接受一个参数，即图像的MIME类型格式，而且适用于创建图像的任何上下文。例子：取得画布中的一幅PNG格式的图像：
var myCanvas=document.getElementById("myCanvas");
//确定浏览器支持<canvas>元素
if(myCanvas.getContext){
//取得图像的数据URI
var imgURI=myCanvas.toDataURL("image/png");
//显示图像
var image=document.createElement("img");
    img.src=imgURI;
    document.body.appendChild(image);   
}

浏览器默认将图像编码为PNG格式。

2D上下文

   使用2D绘图上下文提供的方法，可以绘制简单的2D图形，如矩形，弧线，路经。2D上下文的坐标开始于<canvas>元素的左上角，原点坐标是（0，0），所有坐标值都基于这个原点计算。
   2D上下文的两种基本绘图操作是填充和描边，其结果取决于两个属性：fillStyle和strokeStyle。这两个属性的值可以是字符串、渐变对象或模式对象，默认值都是“#000000”。若为他们指定表示颜色的字符串值，可用CSS中指定颜色值的任何格式，包括颜色名、十六进制码、rgb、rgba、hsl或hsla。例子：
var myCanvas=document.getElementById("myCanvas");
//确定浏览器支持<canvas>元素
if(myCanvas.getContext){
    var context=myCanvas.getContext("2d");
    context.strokeStyle="red";
    context.fillStyle="#0000ff";
}

绘制矩形

    矩形是唯一一种可以直接在2D上下文中绘制的形状。与矩形相关的方法有fillRect（）、strokeRect（）和clearRect（）这三个方法均接受四个参数：矩形的x坐标，y坐标，矩形的宽度和高度，单位是像素。
    fillRect（）方法在画布上绘制的矩形会填充指定的颜色。填充的颜色通过fillStyle属性指定。
var myCanvas=document.getElementById("myCanvas");
//确定浏览器支持<canvas>元素
if(myCanvas.getContext){
    var context=myCanvas.getContext("2d");
    //绘制蓝色矩形
    context.fillStyle="#0000ff";
    context.fillRect(10,10,50,50);
    //绘制半透明的蓝色矩形
    context.fillStyle="rgba(0,0,255,0.5)";
    context.fillRect(30,30,50,50);
}

strokeRect（）方法在画布上绘制的矩形会使用指定的颜色描边，描边颜色通过strokeStyle属性来指定。例子：

var myCanvas=document.getElementById("myCanvas");
//确定浏览器支持<canvas>元素
if(myCanvas.getContext){
    var context=myCanvas.getContext("2d");
    //绘制蓝色描边矩形
    context.strokeStyle="#0000ff";
    context.strokeRect(10,10,50,50);
    //绘制半透明的蓝色描边矩形
    context.strokeStyle="rgba(0,0,255,0.5)";
    context.strokeRect(30,30,50,50);
}
    描边线条的宽度由lineWidth属性控制u，该属性的值可以是任何整数。lineCap属性可以控制线条末端的形状是平头、圆头还是方头（“butt”、“round”、“square”），lineJoin属性控制线条相交的方式是圆交、斜交、还是斜接（“round”、“bevel”、“miter”）。
    clearRect（）方法用于清除画布上的矩形区域。本质是把绘制上下文中的某一矩形区域变透明。
var myCanvas=document.getElementById("myCanvas");
//确定浏览器支持<canvas>元素
if(myCanvas.getContext){
    var context=myCanvas.getContext("2d");
    //绘制蓝色矩形
    context.fillStyle="#0000ff";
    context.fillRect(10,10,50,50);
    //绘制半透明的蓝色矩形
    context.fillStyle="rgba(0,0,255,0.5)";
    context.filleRect(30,30,50,50);
    context.clearRect(40,40,10,10);
}
标签：

相关文章