HTML5中的canvas简介(一)

xiaoxiao2021-02-28  12

    HTML5中新增了一个canvas元素,可以通过JavaScript动态的在这个元素上进行绘图。除了基本的绘制2D图形,canvas还提供了名为webGL的3D上下文。

    一、基本用法:

        <canvas width="200" height="200" id="testcanvas"> </canvas>

       1)使用canvas必须得设置元素的width和height,不然元素不能显示 。可以通过css动态的为canvas元素设置样式。

        2)用canvas绘图,通过getContext()取得上下文对象的引用。

        3)用toDataURL()方法可导出在canvas元素上绘制的图片,toDataURL()方法接受一个MIME类型格式参数。

       

var draw = document.getElementById("testcanvas"); if (draw.getContext) { var context = draw.getContext("2d"); var imgURL = drwa.toDataURL("image/png"); var img = new Image(imgURL); img.src = imgURL document.body.appendChild(img); }

 

二、2D上下文

      2D绘图上下文可以绘制2D图形,如矩形,弧线和路径等。提供的方法可以填充图形和描边,绘制基本的矩形,绘制路径,文本等。

1、填充和描边

     2D上下文2中基本绘图操作是填充和描边,使用context的fillStylestrokeStyle

2、绘制矩形

   比较常见的操作就是绘制矩形了,2D上下文和矩形相关的方法包括:fillReact() 和 strokeReact(),clearReact()。 这三个方法都接受四个参数,X坐标,Y坐标,矩形width,矩形hegith。fillReact用来对矩形填充指定颜色,strokeReact对矩形用指定颜色进行描边。clearReact用来清楚画布上的矩形。

  

   例子:  

if (draw.getContext) { var context = drwa.getContext("2d"); //绘制红色矩形 context.fillStyle = "#ff0000"; context.fillRect(30, 30, 50, 50); //绘制半透明的蓝色描边矩形 context.strokeStyle="rgba(0, 0, 255, 0.5)"; context.strokeRect(30, 30,50,50) }

3、绘制路径

    2D绘制上下文支持多种绘制路径方式,绘制路径首先必须调用beginParh()方法,表示要开始绘制新路径。

    arc(x, y, radius, startAngle, endAngle, countercockwise): 以X,Y为圆心,radius为半径的弧线;

    arcTo(x1, y1, x2, y2, radius ):从上一点开始绘制一条弧线到x2, y2止,并且以给定的半径radius穿过(x1, y1)

     lineTo(x, y):绘制一条直线,到(x, y) 为止

     moveTo(x, y): 将绘图游标移动到(x, y)

     react(x, y, width, heigth): 从(x, y)开始绘制一个宽度是width高度是height的矩形。

     例子,绘制不带数字的时钟表盘

      

if (draw.getContext) { var context = draw.getContext("2d"); //绘制红色矩形 context.fillStyle = "#ff0000"; context.fillRect(30, 30, 50, 50); //绘制半透明的蓝色描边矩形 context.strokeStyle="rgba(0, 0, 255, 0.5)"; context.strokeRect(30, 30,50,50) }

四,绘制文本

2D绘图上下文绘制文本主要用到2个方法:fillText(string, x, y, pwidth) 和strokeText(string, x, y, pwidht)。

3个相关的属性:

font:设置文本字体、大小、样式。如“10px arial ”

textAligin:文本对齐方式

texttBaseline:文本基线

context.font = "bold 14px arial"; context.textAlign = "center"; context.textBaseline = "middle";

canvas 2D绘图还有些其他的方法操作,后面有时间再继续做笔记。   

转载请注明原文地址: https://www.6miu.com/read-1400275.html

最新回复(0)