canvas绘图API

getContext("2d") 创建绘图对象

beginPath() 开始绘制路径

closePath() 结束绘制路径,闭合线框

moveTo(x,y) 移动到绘制起点

lineTo(x,y) 画线段到指定点

arc(x,y,r,start,end) 绘制圆形(弧度单位)

quadraticCurveTo(x,y,endX,endY) 二次贝塞尔曲线

bezierCurveTo(x1,y1,x2,y2,endX,endY)三次贝塞尔曲线

stroke() 线条类型

fill() 填充类型

fillRect(x,y,w,h) 填充矩形

strokeRect(x,y,w,h) 线框矩形

clearRect(x,y,w,h) 清楚矩形

strokeText(string,x,y) 绘制线条文字(空心)

fillText(string,x,y) 绘制填充文字(实心)

drawImage(img,x,y,width,height) 绘制图片(须在img的load函数中)

save() 保存当前状态设定

restore() 恢复到保存之前的状态设定

rotate() 旋转画布角度(弧度制)

fillStyle 填充颜色(支持rgb(),#fff,red)

strokeStyle 线条颜色

lineWidth 线条宽度(整数值,默认单位px)

lineJoin 折线拐角类型(round表示圆角)

font 支持多个值,例如"10px 宋体"

textBaseline 文字基点(默认botto左下为基准点,top为左上)

arc 弧

canvas绘图API相关推荐

微信小程序Canvas绘图API
微信小程序Canvas绘图API 前言使用姿势常用API(以下API都是通过CanvasContext对象进行调用) 颜色.样式 setFillStyle(string|CanvasGradien ...
H5 canvas 绘图
H5的canvas绘图技术 canvas元素是HTML5中新添加的一个元素,该元素是HTML5中的一个亮点.Canvas元素就像一块画布,通过该元素自带的API结合JavaScript代码可以绘制各种 ...
Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...
[转]基于Prototype，利用Canvas绘图实现的web流程图设计器（原型）
基于Prototype,利用Canvas绘图实现的web流程图设计器(原型) 关键字: javascript prototype script.aculo.us canvas 流程图 web画线刚才 ...
Two.js – 为现代浏览器而生的 2D 绘图 API
Two.js 是面向现代 Web 浏览器的一个二维绘图 API.Two.js 可以用于多个场合:SVG,Canvas 和 WebGL,旨在使平面形状和动画的创建更方便,更简洁. Two.js 有一个内 ...
Canvas绘图基础（一）
简单图形绘制矩形:描边与填充 Canvas的API提供了三个方法,分别用于矩形的清除.描边及填充 clearRect(double x, double y, double w, double h) ...
微信小程序使用canvas绘图
微信小程序的绘图是使用canvas,canvas的使用和普通的h5的canvas使用一样,没有什么区别想使用canvas,首先是要在页面是创建canvas标签,如果只是想要获得图片,可以把canva ...
微信小程序使用canvas绘图
微信小程序的绘图是使用canvas,canvas的使用和普通的h5的canvas使用一样,没有什么区别想使用canvas,首先是要在页面是创建canvas标签,如果只是想要获得图片,可以把canva ...
Canvas 实用API详解
说明本篇内容可以看做是一篇关于canvas的API文档,由于全文的篇幅较长,通常用于作为API文档查看,可通过目录查找.本篇也可做为想详细了解canvas所有操作的学习文章.Canvas 对象表示一 ...
HTML5 学习总结（四）——canvas绘图、WebGL、SVG
目录一.Canvas 1.1.创建canvas元素 1.2.画线 1.3.绘制矩形 1.4.绘制圆弧 1.5.绘制图像 1.6.绘制文字 1.7.随机颜色与简单动画二.WebGL 2.1.HTML ...

canvas绘图API

canvas绘图API相关推荐

最新文章

热门文章