canvas学习api
1、canvas.getContext():获取渲染上下文和绘画功能;
一、绘制矩形
2、ctx.fillRect(x,y,width,height):绘制矩形;
3、ctx.strokeRect(x,y,width,height):绘制矩形边框;
4、ctx.clearRect(x,y,width,height):清除矩形;
二、绘制路径
5、ctx.beginPath():新建路径开始命令;
6、ctx.closePath():路径闭合之后绘制命令重新回到上下文;
7、stroke():通过线条来绘制图形轮廓;
8、fill():填充路径内容途径生成实心图形;
三、移动笔触
moveTo(x,y);
四、实线
lineTo(x,y):绘制一条从当前位置到x,y位置的实线;
五、圆弧
arc(x,y,radius,startAngle,endAngle,方向(默认顺时针));
六、贝塞尔以及二次贝塞尔
quadraticCurveTo(cp1x,cp1y,x,y):cp1x,cp1y是贝塞尔曲线的控制点,x,y是结束点;
二次贝塞尔: bezierCruveTo(cp1x,cp1y,cp2x,cp2y,x,y)多了两个控制点;
七、Path2D(不太详细)
八、颜色填充
fillStyle = color:设置图形的填充颜色;
strokeStyle = color:设置图形轮廓的颜色;
九、设置透明度
ctx.globalAlpha = (0~1);
十、线型 line styles
1、lineWidth = width;设置线的宽度(注意:线的宽度是从宽度中心向两边各绘制宽度的一般,因此要准确落在边缘需要减半计算);
2、 lineCap = type:设置线条末端样式,type有 butt,round,square,默认是butt,
3、 lineJoin,设置线条交接处样式,值 有round,bevel,miter;默认是miter;
4.miterLimit,设置外延交点和连接点的最大距离,超出最大距离则变成bevel;
5、setLineDash和setLineOffset设置虚线样式;
十一、渐变 Gradients
1、线性渐变 createLinearGradient(x1,y1,x2,y2),参数规定起始位置和结束位置,即线性方向;
2、径向渐变 createRadialGradient(x1,y1,r1,x2,y2,r2);
3、颜色值设定 addColorStop(position,color);position是渐变位置(0~1),color是颜色;
注:gradient对象其实也是一种颜色,要用fillStyle引用;
十二、状态保存与恢复
save()和restore();
十三、移动原点
translate(x)
canvas学习api的更多相关文章
- canvas学习之API整理笔记(二)
前面我整理过一篇文章canvas学习之API整理笔记(一),从这篇文章我们已经可以基本了解到常用绘图的API.简单的变换和动画.而本篇文章的主要内容包括高级动画.像素操作.性能优化等知识点,讲解每个知 ...
- canvas学习之API整理笔记(一)
其实canvas本身很简单,就是去学习它的API,多看实例,多自己动手练习,多总结.但是canvas的API实在是有点多,对于初学者来说,可能学到一半就止步不前了.我也有这种感觉,在学习的过程中,编写 ...
- Html5 学习系列(五)Canvas绘图API快速入门(1)
引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...
- Canvas学习:封装Canvas绘制基本图形API
Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习 从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...
- Html5 学习系列(五)Canvas绘图API快速入门(2)
Canvas绘图API Demos 上一篇文章中,笔者已经给大家演示了怎么快速用Canvas的API绘制一个矩形出来.接下里我会在本文中给各位介绍Canvas的其他API:绘制线条.绘制椭圆.绘制图片 ...
- canvas学习(一)
Canvas 学习之路 (一) canvas 是H5 里面神一样的东西,使得只是通过html和js就能做出非常棒的游戏和画面. 因为对前端无限的爱好,更加对canvas充满好奇,将我学习canvas的 ...
- 引言:Canvas绘图API快速入门
引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...
- canvas学习总结六:绘制矩形
在第三章中(canvas学习总结三:绘制路径-线段)我们提高Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的. 立即绘制图形方法仅有两个strokeRect(),fillRec ...
- canvas学习和滤镜实现
最近学习了 HTML5 中的重头戏--canvas.利用 canvas,前端人员可以很轻松地.进行图像处理.其 API 繁多,这次主要学习常用的 API,并且完成以下两个代码: 实现去色滤镜 实现负色 ...
随机推荐
- smali语法(二)
一.smali的包中信息 .class public Lcom/aaaaa; .super Lcom/bbbbb; .source "ccccc.java" 1.它是com.aaa ...
- [flask实践] 解决mysql数据库不支持中文的问题
接上一篇文章,在解决了mysql+flask环境配置问题之后,往数据库存中文字符串会报1366错误,提示不正确的字符.继而发现默认的mysql采用了Latin1字符集,这种编码是不支持中文的. 如果想 ...
- Windos系统git提交
一.$ git status //查看当前项目下所有文的状态,如果第一次,你会发现都红颜色的,因为它还没有交给git/github管理. 二.$ git add . //(.)点表示当前目录下 ...
- PHP就业前景好不好一看便知,转行选择需谨慎!
随着互联网行业迎来新一波的热潮,更多的年轻人选择软件行业发展.由于互联网本身快速发展.不断创新的特点,决定了只有以快开发速度和低成本,才能赢得胜利,才能始终保持网站的领先性和吸引更多的网民. 互联网的 ...
- linux配置分步安装lnmp环境----ghj
前台:nignx 后台:apache[linux命令]用户文件目录启动定时任务:[开启RZ命令]yum -y install lrzsz [防火墙]防火墙配置文件: /etc/sysconfig/ip ...
- appium+Linux环境安装配置
背景:想要在Jenkins上跑appium的自动化测试,所以想要在Jenkins服务器(Linux远程)上安装appium服务,故而研究了一下appium+Linux下安装.虽然有无数的前辈踩过坑 ...
- SQL图像查看器 —— SQL Image Viewer
有时候往数据库里面存储了一些图片,但是如果不写读取程序的话,就不知道存储的对不对. 或者查看SQL数据库里面二进制看不懂,这个看图片很直观的. 就需要SQL Image Viewer这么一个
- Pythonh中的zip()与*zip()函数详解
前言 实验环境: Python 3.6: 示例代码地址:下载示例: 本文中元素是指列表.元组.字典等集合类数据类型中的下一级项目(可能是单个元素或嵌套列表). zip(*iterables)函数详解 ...
- python3 三级菜单-基础版
# -*- coding:utf-8 -*- data = { "北京":{ "东城区":{ "安定门":["国子监", ...
- 使用背景图修改radio、checkbox样式
如果觉得设置样式太麻烦,或者页面上选中的样式太复杂,也可以用背景图去修改样式<div class=""> <label><input type=&qu ...