canvas介绍

十二月19日
1.canvas简介 
<canvas>元素看起来和<img>元素很像,唯一不同的是它没有src,alt这样的属性,实际上<canvas>标签只有两个属性,width和height。这些都是可选的,同样可以使用dom properties来设置。如不指定宽度和高度,Canvas会初始化为宽度为300像素,高度为150像素。也可以使用css来定义大小,但在绘制图像会伸缩以适应它的框架尺寸:如果css的尺寸与初始画布的比例不一致,它会出现扭曲。
表示画布

2.绘制图像 
var context=canvas.getcontext("2d")通过画布对象得到画布上下文对象,通过2d。二维平面上面开始后续操作
context.moveto(10,0);起始位置
context.lineto(50,0);连接位置
context.stroke();描边
var canvas=document.getelementbyld("canvas");得到当前画布对象
var context=canvas.getcontext("2d");得到当前画布上下文对象,我们通过上下文来进行相应操作
context.moveto(10.100);
context.lineto(30.10);
context.lineto(50.100);
context.lineto(70.10);
context.stork()描边
context.linewith=10
context.storkestyle()描边颜色
context.fillstyle()填充颜色
beginpath()重置路径
去掉context.beginpath()未重置路径
添加context.closeoath();闭合路径
3.常用方法
context.createlineargradient 线条渐变

4. SVG简介 

可缩放矢量图 定义用于网络基本矢量图形 使用XML格式定义图片 万维网联盟标准
优势可通过文本编辑器创建修改 图像可被搜索 索引 脚本化或压缩


5.
SVG绘制基本图形

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值