html5 canvas基础10点

本文主要讲解下一些canvas的基础

1.<canvas id=”canvas”>若此浏览器不支持canvas会显示该文字</canvas>

//创建个html节点

2.var context = canvas.getContext(‘2d’)

//返回一个表示用来绘制的环境类型的环境,目前只支持2d

3.context.moveTo(10,10)

//起始点

4.context.lineTo(600,600)

//中途经过点以及末尾点

5.context.lineWidth = 10

//直线的宽度(线段宽度)

6.context.strokeStyle = “color”

//指定线条的样式

7.context.stroke()

//将进行绘制;

8.beginPath和closePath是成对出现的,用在绘制封闭的多边形

//如果有2条或2条以上的线时,beginPath可以清楚前者的状态(比如颜色),重新定义一个。还能替代moveTo();

9.当使用封闭型多边形时

context.fillStyle=“color”;//填充颜色
context.fill();//运行

10.canvas自带函数rect(x,y,width,height)

//轻松编写出一个矩形
    原文作者:徐鹏云
    原文地址: https://segmentfault.com/a/1190000008244837
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞