【javascript】Canvas绘图详解

2017-12-29 本文已影响51人 shanruopeng

Canvas绘图

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
浏览器支持
- Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持<canvas> 及其属性和方法。
- 注释：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
HTML 5 Canvas 参考手册

1、基本用法

(1)创建 Canvas 元素

向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度。
开始和结束标签中的内容是后备信息，如果浏览器不支持<canvas>元素，就会显示这些信息。

<canvas id = "drawing" width = "200" height= "200">A drawing of something</canvas>

(2)通过 JavaScript 来绘制

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。
要在这块画布（canvas）上绘图，需要取得绘图上下文。而取得绘图上下文对象的引用，需要调用getContext()方法并传入上下文的名字。

var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if (drawing.getContext){
    var context = drawing.getContext("2d");
    //更多代码
}

使用toDataURL()方法，可以导出在<canvas>元素上绘制的图像。这个方法接受一个参数，即图像的MIME 类型格式，而且适合用于创建图像的任何上下文。

var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if (drawing.getContext){

    //取得图像的数据URI
    var imgURI = drawing.toDataURL("image/png");
    
    //显示图像
    var image = document.createElement("img");
    image.src = imgURI;
    document.body.appendChild(image);
}

2、2D上下文

使用2D 绘图上下文提供的方法，可以绘制简单的2D 图形，比如矩形、弧线和路径。
2D 上下文的坐标开始于<canvas>元素的左上角，原点坐标是(0,0)。所有坐标值都基于这个原点计算，x 值越大表示越靠右，y 值越大表示越靠下。
默认情况下，width 和height 表示水平和垂直两个方向上可用的像素数目。

2.1 填充和描边

填充，就是用指定的样式（颜色、渐变或图像）填充图形；
描边，就是只在图形的边缘画线。

属性	描述
fillStyle	设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle	设置或返回用于笔触的颜色、渐变或模式

这两个属性的值可以是字符串、渐变对象或模式对象，而且它们的默认值都是"#000000"。
如果为它们指定表示颜色的字符串值，可以使用CSS中指定颜色值的任何格式，包括颜色名、十六进制码、rgb、rgba、hsl 或hsla。

var drawing = document.getElementById("drawing");

//确定浏览器支持<canvas>元素
if (drawing.getContext){
    var context = drawing.getContext("2d");
    context.strokeStyle = "red";
    context.fillStyle = "#0000ff";
}

2.2 绘制矩形

矩形是唯一一种可以直接在2D上下文中绘制的形状。
与矩形有关的有四个方法。

方法	描述
rect()	创建矩形
fillRect()	绘制“被填充”的矩形
strokeRect()	绘制矩形（无填充）
clearRect()	在给定的矩形内清除指定的像素

这几个方法都能接收4个参数

参数	描述
x	矩形左上角的 x 坐标
y	矩形左上角的 y 坐标
width	矩形的宽度，以像素计
height	矩形的高度，以像素计

<!--示例画布-->
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

(1) rect()

使用 stroke() 或 fill() 方法在画布上实际地绘制矩形。
javascript 语法

context.rect(x,y,width,height);

示例

/**通过 rect() 方法来创建三个矩形**/

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// 红色矩形
ctx.beginPath();
ctx.lineWidth="6";
ctx.strokeStyle="red";
ctx.rect(5,5,290,140);  
ctx.stroke();

// 绿色矩形
ctx.beginPath();
ctx.lineWidth="4";
ctx.strokeStyle="green";
ctx.rect(30,30,50,50);
ctx.stroke();

// 蓝色矩形
ctx.beginPath();
ctx.lineWidth="10";
ctx.strokeStyle="blue";
ctx.rect(50,50,150,80);
ctx.stroke();

好好学习

【javascript】Canvas绘图详解

猜你喜欢

热点阅读