关闭

html5 canvas

标签: html5canvas
226人阅读 评论(0) 收藏 举报
分类:

<canvas>标签就是一块画布。通俗点说,就是用<script>脚本来绘图的草稿纸。ie9以及其他的一些浏览器都支持该标签。


<canvas>本身是没有绘图能力的,所有的绘图操作都必须在javascript中完成。


js在<canvas>上绘图的方式:

 (1)获取canvas对象:var c = document.getElementById("xxxxx");

  (2)创建context对象:var ctx = c.getContext("2d");

  (3)绘制矩形

           ctx.fillStyle="XXXX";

           ctx.fillRect(0,0,x,y);

          绘制直线

           ctx.moveTo(0,0);(起点)

           ctx.lineTo(x,y);(终点)

          在canvas中绘制圆形

          ctx.beiginPath();

           arc(x,y,r,start,stop);

           ctx.stroke();

           在canvas中绘制文本

           font定义字体 ctx.font="xxxx";

           fillText(text,x,y);在canvas上绘制实心的文本;

           strockText(text,x,y);在canvas上绘制空心的文本;

           绘制线形渐变

           var grd =  ctx.createLinearGradient(x,y,x1,y1);

           grd.addColorStop(0,"red");

           grd,addColorStop(1,"yellow");

           grd.fillStyle()=grd;

           grd.fillRect(x,y,x1,y1);

           绘制径向渐变

           var grd = ctx.createRadialGradient(x,y,r,x1,y1,r1);

           grd.addColorStop(0,"red");

           grd,addColorStop(1,"yellow");

           grd.fillStyle()=grd;

           grd.fillRect(x,y,x1,y1);

           放图片

           var img = document.getElementById("id");

           img.onload = function(){

                  ctx.drawImage(img,10,10);

          }


         


0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

html5学习canvas

在html5中新增了一个标签元素叫做canvas,顾名思义,canvas就是一个画布,我们可以通过canvas来在页面中绘制我们想要的元素,以及添加一些动画效果。创建canvas我们可以通过两种方式来...
  • mockingbirds
  • mockingbirds
  • 2015-09-19 23:22
  • 882

html5 canvas 学习笔记

getContext("2d")  对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 fillStyle属性可以是CSS颜色,渐变,或图案 fillRe...
  • amberla
  • amberla
  • 2015-09-24 11:37
  • 115

canvas的arc()方法详解

在做项目时画曲线时主要用的就是arc()画圆弧的方法: context.arc(x,y,r,sAngle,eAngle,counterclockwise); 即: arc(圆心的...
  • sunny327
  • sunny327
  • 2015-07-29 22:41
  • 1953

Canvas:arcTo和arc方法使用介绍

Html5中绘图API中有这么一个方法:
  • jearbilove
  • jearbilove
  • 2014-05-11 22:15
  • 1605

HTML5绘图之Canvas标签 绘制坐标轴

因为最近在做数据的统计,需要表现在网页上 也查过一些插件和一些绘图语言,学习时间成本太高,所以用上了HTML5的Canvas标签和JavaScript,可以很快的满足我需要的绘图需求JavaScr...
  • ErnestStarman
  • ErnestStarman
  • 2016-07-05 13:59
  • 3035

html5 canvas开发详解第二版 示例代码

  • 2018-01-09 23:06
  • 17.74MB
  • 下载

HTML5 Canvas核心技术图形动画与游戏开发

  • 2017-12-20 12:03
  • 78.19MB
  • 下载

HTML5 Canvas核心技术:图形、动画与游戏开发 mobi

  • 2017-12-29 14:50
  • 8.12MB
  • 下载

html5 canvas实现手写签名

  • 2014-10-20 15:57
  • 4KB
  • 下载

HTML5 Canvas实现3D旋转物体动画及模糊发光特效源码

  • 2014-09-01 17:57
  • 2KB
  • 下载
    个人资料
    • 访问:12128次
    • 积分:723
    • 等级:
    • 排名:千里之外
    • 原创:62篇
    • 转载:1篇
    • 译文:0篇
    • 评论:0条