html canvas分析

·  阅读 1073
html canvas分析

什么是canvas?

HTML5 <canvas> 元素用于图形的绘制,通过JavaScript来完成. <canvas> 标签只是图形容器,您必须使用脚本来绘制图形。


canvas的兼容性

image.png


canvas怎样使用?

Document.getElementById() 方法获取HTML <canvas> 元素的引用。接着,HTMLCanvasElement.getContext() 方法获取这个元素的context——图像稍后将在此被渲染。

由 CanvasRenderingContext2D 接口完成实际的绘制。fillStyle 属性让长方形变成绿色。fillRect() 方法将它的左上角放在(10, 10),把它的大小设置成宽300高200。.

如图:

image.png


Canvas 坐标

canvas 是一个二维网格。

canvas 的左上角坐标为 (0,0)

上面的 fillRect 方法拥有参数 (0,0,150,75)。

意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。

Canvas - 路径

在Canvas上画线,我们将使用以下两种方法:

  • moveTo(x,y) 定义线条开始坐标
  • lineTo(x,y) 定义线条结束坐标

绘制线条我们必须使用到 "ink" 的方法,就像stroke().

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

复制代码

效果如图:

image.png

Canvas写文本

使用 canvas 绘制文本,重要的属性和方法如下:

  • font - 定义字体
  • fillText(text,x,y) - 在 canvas 上绘制实心的文本
  • strokeText(text,x,y) - 在 canvas 上绘制空心的文本

使用 fillText():

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="50px Arial";
ctx.fillText("Hi,LiMing",14,90);

复制代码

image.png

使用canvas遇到的问题

1.如何设置不同的样式

在写样式前加入  ctx.beginPath();     

注:canvas定义 

 var c=document.getElementById("myCanvas");
 var ctx=c.getContext("2d");
复制代码

2.把canvas转为图片格式时内部加载的图片不显示

利用img的complete属性判断图片是否加载完成

var interval = setInterval(function () {
              if(img.complete == true ){
                 clearInterval(interval );
                 var base64 = canvas.toDataURL("image/png");
               }
        }, 500);   
复制代码

注:使用计时器没隔0.5秒检测一次,图片加载完成后取消计时器,把canvas转为图片格式,避免canvas转图片时内部的图片丢失

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改