博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
canvas
阅读量:5734 次
发布时间:2019-06-18

本文共 971 字,大约阅读时间需要 3 分钟。

canvas画布 (位图)

  1.不能再style中给canvas设置宽高,会有位移差

  2.js中每次使用canvas,都要设置一个绘图环境,然后会得到一个对象,然后对其进行操作;

    var c=document.getElementById("") canvas标签的id值;

    var d=c.getContext("2d")  设置绘图属性;

    然后得到d这个对象,就可以对其进行操作元素里面的属性和方法;

    方法和属性(带()的是方法,不带的是属性):

属性:

  fillRect() 绘制一个填充的方块(默认颜色是黑色)

  strokeRect() 绘制带边框的方块

  绘制线条

    moveTo() 绘制线段的起点

    lineTo()  绘制线段的领点

    每个线条只能有一个moveTo,可以有多个lineTo

    stroke() 绘制线段

    beginPath(),closePath()  二者同时出现,将绘制路线闭合(起始点,结尾点首尾相连)

  rect() 绘制方块

    clearRect(0,0,width,height) 清除画布

    can.save(),can.restore()  二者成对出现,中间的属性样式只影响内部,不影响外部

  画圆

    can.arc(200,200,50,0,Math.PI,ture)

    can.stroke()

    200,200 圆心坐标;50  半径;0 起始弧度;Math.PI 结束弧度 ;true 逆时针方向

    注意:角度有正负之分,顺时针的角度是正的;逆时针转的角度是负的

  画布的平移和旋转

    平移:translate 画布大小位置不变,起始坐标变了(相当于坐标平移)

    rotate() 画布的旋转都是以(0,0)起始点为中心点旋转

    scale(0.5,0.5) 画布的缩放,将画布向后移动,人的视距就变远了;近大远小

  画布中插入图片

    

  画布中插入字体

    

    200,200 字体的起始点,默认起始点在字体的左下角

 

转载于:https://www.cnblogs.com/wwwzhaocom/p/10910892.html

你可能感兴趣的文章
关于linux上安装网络打印机
查看>>
css 默认不显示 之后显示
查看>>
我的友情链接
查看>>
DNS显性+隐性URL转发原理
查看>>
我的友情链接
查看>>
网易有道 IP地址、手机号码归属地和身份证 查询接口API
查看>>
鼠标停留在GridView某一行时行的颜色改变
查看>>
系列3:WAS Liberty Profile hello mysql jdbc
查看>>
基础知识:python模块的导入
查看>>
Android MVC之我的实现
查看>>
我的友情链接
查看>>
我的友情链接
查看>>
关于批处理-1
查看>>
Tomcat部署Web应用方法总结
查看>>
Python3 django2.0 字段加密 解密 AES
查看>>
CCNA实验之:网络地址转换(NAT)实验
查看>>
计算机网络原理笔记-停止等待协议
查看>>
确定当前记录和下一条记录之间相差的天数
查看>>
sql语句返回主键SCOPE_IDENTITY()
查看>>
机器学习开源项目精选TOP30
查看>>