关闭

html5 canvas

标签: html5canvas
187人阅读 评论(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网站的观点或立场
    个人资料
    • 访问:9813次
    • 积分:694
    • 等级:
    • 排名:千里之外
    • 原创:62篇
    • 转载:1篇
    • 译文:0篇
    • 评论:0条