课程咨询:400-111-8989

  • 2017html5新增标签canvas的详细用法

    发布:HTML5培训  来源:html5问吧  时间: 2017年07月14日

  • 2017html5新增标签canvas,HTML5技术更新换代很快,停止学习就会被行业所淘汰,今天小编就为大家详细介绍一下2017html5新增标签canvas的详细用法。...

  • 2017html5新增标签canvas,HTML5技术更新换代很快,停止学习就会被行业所淘汰,今天小编就为大家详细介绍一下2017html5新增标签canvas的详细用法。

    Canvas API(画布)是在HTML5中新增的标签用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitmap)。Canvas 对象表示一个 HTML 画布元素 -。它没有自己的行为,但是定义了一个 API 支持脚本化客户端绘图操作。

    在html部分写如下代码,建议在标签之间加上一句“ 您的浏览器不支持canvas”,如果浏览器支持则之间渲染canvas,不会显示这句话。

    接下来,就都是在js中写的脚本了。

    //first,获取画布var canvas = document.querySelector("#canvas");//second,获取绘制环境var ctx = canvas.getContext("2d");

    canvas的重要方法

    · moveTo(x,y)设置绘制线段的起点(用于表示一条新线的绘制)。

    · lineTo(x,y)绘制线段到制定点,如果上第一条线,可以不使用moveTo,直接使用lineTo,否则建议一律使用moveTo。

    · stroke() 描边(绘制)。

    · closePath()闭合路径,将当前正在绘制的路径闭合

    · fill() 填充

    · fillstyle 设置填充样式,同strokestyle

    · beginPath() 开始一条新路径的绘制

    · beginPath 与 closePath没有一丁点关系

    · fillRect(x,y,w,h)填充矩形

    · strokeRect(x,y,w,h)描边矩形

    · clearRect(x,y,w,h)擦除 指定的区域

    · rect(x,y,w,h)定义矩形路径

    · arc(cx,cy,radius,startAngle,endAngle[,是否逆时针])

    绘制圆弧

    cx | cy 圆心坐标

    radius 半径

    startRadian | endRadian 开始 | 结束 弧度

    -fillText(string,x,y)填充文字

    -strokeText(string,x,y)描边文字

    文字属性:

    font设置字体样式

    textAlign设置文字水平对齐方式

    textBaseline设置文字垂直对齐方式

    cavas的常用属性

    · lineWidth 设置线宽 ctx.lineWidth =10

    · strokeStyle 设置描边样式 接收所有颜色类型

    · lineJoin 设置线段交汇处的样式

    bevel斜角

    round圆角

    miter尖角(默认)

    · lineCap设置线帽(只在断点处有效)butt无 默认 round 圆帽 square方帽

    使用canvas做动画思路

    通过定时器不断擦除,可以使用clearRect(x,y,w,h)方法。

    入门canvas的例子

    其中写了一个table坐标,帮助理解canvas的坐标点。

    * {

    margin: 0;

    padding: 0;

    }

    canvas {

    box-shadow: 2px 2px 5px black;

    margin: 50px;

    }

    table {

    border-collapse: collapse;

    position: absolute;

    top: 50px;

    left: 50px;

    }

    table td {

    width: 49px;

    height: 49px;

    border: 1px dotted #ccc;

    }

  • 上一篇:学html5能干什么,好就业吗?

    下一篇:没有下一篇了

html5相关资讯
网站导航
2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56