码迷,mamicode.com
首页 > 其他好文 > 详细

canvas

时间:2017-11-16 20:52:22      阅读:107      评论:0      收藏:0      [点我收藏+]

标签:down   概述   ase   etc   sep   技术分享   rar   false   上下文环境   

一、canvas的概述

1、定义

  • <canvas>是H5新增的标签
  • canvas提供给了JavaScript绘图接口
  • canvas绘图建立在坐标系上

    2、应用领域

  • 炫酷特效
  • 可视化数据(图表)
  • 游戏
  • 大型应用(地图)
  • 在线系统(在线ps)

    3、canvas标签

  • 属性width
  • 属性height
  • 方法getContext()可选参数"2d"/"webgl(3d)" 返回上下文环境

    4、绘图环境

  • 该对象提供API,让JavaScript来绘制图形
    技术分享

    二、绘图基础

    1、路径的开启和闭合

  • beginPath()开启路径
  • closePath()关闭路径(把路径闭合)
    技术分享
    浏览器
    技术分享

    2、设置起点

  • moveTo(x,y)

    3、画线

  • lineTo(s,y)绘制直线

    4、描边

  • strokeWidth属性设置描边线的粗细
  • strokeStyle属性设置描边颜色
  • stroke() 绘制
    技术分享

    5、填充

  • fillStyle属性填充颜色
  • fill()执行填充

    6、快速矩形

  • rect(x,y,width,height)绘制矩形路径
  • strokeRect(x,y,widhtn,height)描边矩形
  • fillRect(x,y,width,height)填充矩形
  • clearRect(x,y,width,height)清除矩形(可以用来清除屏幕)
    技术分享
    浏览器
    技术分享

    7、圆弧

  • arc(x,y,radius,end,true/false)
  • start表示开始的弧度(位置)0弧度是三点钟方向
  • end表示结束的弧度(位置)
  • 默认false表示顺时针
    技术分享
    浏览器效果
    技术分享

    8、绘制文字

  • font属性设置文字的风格、大小、字体、值同css的font属性
  • textAlign属性文字水平对齐方式(srart/left/right/center/end)
  • textBaseline属性文字的垂直对齐方式(top/middle/bottom)
  • strokeText(text,x,y)描边字

canvas

标签:down   概述   ase   etc   sep   技术分享   rar   false   上下文环境   

原文地址:http://www.cnblogs.com/DCL1314/p/7845882.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!