wikey带你速成canvas！

wikey
89 阅读1分钟

canvas是什么

canvas是HTML5的一个新标签，创建了画布，提供了很多上下文context,context就是画笔，在网页的很多地方都有其身影，例如echarts、地图等

canvas如何使用

新建画布

canvas标签自带width和height两个属性用来控制画布的大小

<canvas id="canvas" width="500" height="500"></canvas>

如何出笔

按照坐标系 image.png

开始画

选一个起点

image.png

直线

image.png

圆弧

image.png

贝塞尔曲线

请自己去查一下查嘿嘿

生成矩形

image.png

文字

image.png 设置文本字体 image.png 设置文本对齐 image.png

图片

添加图片 image.png 在canvas中绘制图片 image.png 如果图片过大，绘制时图片还没有加载好，用onload来监听图片内容

image.png 展示部分图片
前四个参数是我们截取的部分
后四个参数是剪裁图片的位置

image.png

image.png

image.png

样式

填充颜色，如果不设置的话，默认是黑色的 image.png

线的宽度为， image.png

线末端的形状

image.png

两条线结合的样式 image.png

线的末端 image.png

总结：我们一般使用样式只会出现在一个笔画或者一个图形里面，如果每次设置新的样式，这很繁琐，所以

所以介绍两个新的api，请把他们理解成栈的push和pop image.png

image.png

image.png

变形

移动坐标系的原点 image.png

顺时针旋转坐标系 image.png

放大缩小坐标比例 image.png

avatar
文章
阅读
粉丝