首页 > Windows开发 > 详细

canvas常用api

时间:2018-02-13 13:11:01      阅读:39      评论:0      收藏:0      [点我收藏+]

标签:html元素   draw   进行   不能   使用   star   改变   时钟   不兼容   

1. 在canvas标签中给出长宽(不带单位):<canvas width="600" height="600"></canvas>

 或者在js中设置长宽:canvas.width = 600; canvas.height = 600;

 注意:canvas是行内块元素,用CSS设置的width和height像素值是canvas在页面渲染出来的宽高,而用js设置或者在标签中直接给出的则是canvas的分辨率,二者有本质的区别。
    canvas元素的使用与普通的html元素并不相同,它有一个默认尺寸300*150,在css中设置宽高只能改变canvas的显示宽高,而并没有改变画布绘制时的尺寸,所以要为canvas设置绘制的尺寸,必须写在元素标签上或用JS设置。

2. 浏览器兼容时,不会显示canvas标签内的内容;不兼容时才会显示。

  <canvas width="600" height="600">您的浏览器不支持canvas标签</canvas>

3. var canvas = document.getElementById("canvas"); // 获取canvas标签
    var context = canvas.getContext("2d"); // 获取2d上下文环境

    context.beginPath();//可以开始绘制

    context.moveTo(100,100); //画笔移动到(100,100);
    context.lineTo(150,200); //创建一条从(100,100)到(150,200)的路径
    context.fillStyle = "#ccc"; //填充颜色为#ccc
    context.strokeStyle = "#fff"; //进行描边
    context.lineWidth = 5;
    context.fill();//进行填充
    context.stroke();//进行描边

    context.closePath();//关闭当前路径 (基于状态)

    关于closePath():当当前路径不是封闭路径时,使用closePath会自动将当前路径的首尾连接起来

    context.fillRect(x,y,w,h);
    context.clearRect(50, 30, 110, 35); //清除画布上的内容

    (50,30)为矩形起点,110.35为矩形长宽

   想绘制多条不封闭路径图形,在每次绘制新路径时使用beginPath即可
4. 绘制弧线
 context.arc(x,y,r,startingAngle,endingAngle,anticlockwise = false);
   参数分别为:圆心坐标,半径,起始角度,结束角度,时钟方向(false为顺时针、true为逆时针)
        三点钟方向为0pi,六点钟方向为0.5pi,九点钟为1.0pi,12点钟为1.5pi
   例如:context.arc(300,300,100,0,Math.PI*1.5,false);

5. 绘制矩形

 context.fillRect(x,y,w,h);
   context.strokeRect(50, 30, 110, 35)
   context.clearRect(50, 30, 110, 35); //清除画布上的内容

6. 绘制虚线

 context.setLineDash([a,b]);//a为虚线线段长度,b为虚线线段间隔长度

7. 取得canvas元素相对于浏览器窗口的位置

 element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置

8. 绘制图片

 cvs.drawImage(image.x,y,width,height);
   context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

   image可以是元素或是image对象,但不能是路径
   传递给 drawImage() 方法的图像必须是 Image 对象或 Canvas 元素

canvas常用api

标签:html元素   draw   进行   不能   使用   star   改变   时钟   不兼容   

原文:https://www.cnblogs.com/Kuro-P/p/8446410.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号