canvas的api小结
HTML
<canvas id="canvas"></canvas>
Javascript
var canvas=document.getElementById('canvas');
canvas.width
canvas.height
var context=canvas.getContext("2d")
//使用context进行绘制
//画图线
moveTo(x,y);
lineTo(x,y);
beginPath();
closePath();
//状态
lineWidth //线粗
strokeStyle //线颜色
fillStyle //封闭图形的填充颜色
//执行
stroke();
fill();
1.绘制矩形api
rect(x,y,width,height) //起始点坐标x,y 宽width 高height (普通)
fillRect(x,y,width,height) //绘制填充矩形
strokeRect(x,y,width,height) //绘制带边框矩形
2.线条属性
1.lineWidth 线宽
2.lineCap 线端点的形状
lineCap=“butt”(default)折头
“round” 圆头
“square”’ 方头
3.lineJoin 线段相交处
lineJoin=“miter”(default)尖角 miterLimit(当尖角太锋利,导致内角外角定点相距超过miterLimit的长度,将自动转为“bevel”)
“bevel” 折角
“round” 圆角
3.图形变换
save()
restore() //维持绘图的安全性
translate(x,y) //平移
rotate(deg) //旋转
scale(sx,sy) //放缩
变换矩阵:
transform(a,b,c,d,e,f)
setTransform(a,b,c,d,e,f)
4.填充样式
1.fillStyle的值
fillStyle = color 颜色
gradient 渐变
image 图片
canvas 画布
video 音频
2.fillStyle=color
1.#ffffff
2.642
3.rgb(255,128,0)
4.rgba(100,100,100,0.8)
5.hsl(20,62%,68%)
6.hsla(20,82%,33%,0.6)
7.red
3.fillStyle=gradient
//线性渐变色
var grd=context.createLinearGradient(xstart,ystart,xend,yend);
//径向渐变色
var grd=context.createRadialGradient(x0,y0,r0,x1,y1,r1);
grd.addColorStop(stop,color)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#canvas{
border: 1px solid #000;
display:block;
margin: 50px auto;
}
</style>
</head>
<body> <canvas id="canvas">您的浏览器不支持Canvas</canvas> </body>
<script>
window.onload=function (ev) {
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 785;
var context = canvas.getContext("2d");
linegradient(context);//线性渐变
radiagradient(context);//径向渐变
}; function linegradient(context) {
var gradient = context.createLinearGradient(0,0,800,600);
// 设置渐变颜色
gradient.addColorStop(0.0, "red");
gradient.addColorStop(0.2, "orange");
gradient.addColorStop(0.4, "yellow");
gradient.addColorStop(0.6, "green");
gradient.addColorStop(0.9, "cyan");
gradient.addColorStop(1.0, "blue");
//gradient.addColorStop(1.0, "purple");
// 使用渐变线填充
context.fillStyle = gradient;
context.fillRect(0, 0, 800, 800);
}; function radiagradient(ctx) {
var gradient = ctx.createRadialGradient(300, 300, 10, 100, 100, 50);
gradient.addColorStop(0, 'rgb(255,0,0)'); //红
gradient.addColorStop(0.5, 'rgb(0,255,0)');//绿
gradient.addColorStop(1, 'rgb(0,0,255)'); //蓝
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 600,600);
}
</script>
</html>
线性渐变与径向渐变
4.fillStyle=image||canvas||video
createPattern(img,repeat-style)
createPattern(canvas,repeat-style)
createPattern(video,repeat-style)
repeat-style: no-repeat(不平铺,就单张)
repeat-x(横向平铺)
repeat-y(纵向平铺)
repeat (横纵向平铺)
canvas的api小结的更多相关文章
- Canvas:技术小结
Canvas:技术小结 资料 [教程:MDN官方中文教程] https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial [ ...
- Html5 学习系列(五)Canvas绘图API快速入门(2)
Canvas绘图API Demos 上一篇文章中,笔者已经给大家演示了怎么快速用Canvas的API绘制一个矩形出来.接下里我会在本文中给各位介绍Canvas的其他API:绘制线条.绘制椭圆.绘制图片 ...
- Html5 学习系列(五)Canvas绘图API快速入门(1)
引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...
- 引言:Canvas绘图API快速入门
引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...
- Canvas createRadialGradient API
Canvas createRadialGradient API <!DOCTYPE html> <html lang="en"> <head> ...
- HTML5之canvas基本API介绍及应用 1
一.canvas的API: 1.颜色.样式和阴影: 2.线条样式属性和方法: 3.路径方法: 4.转换方法: 5.文本属性和方法: 6.像素操作方法和属性: 7.其他: drawImage:向画布上绘 ...
- Canvas原生API(纯CPU)计算并渲染三维图
Canvas原生API(纯CPU)计算并渲染三维图 前端工程师学图形学:Games101 第三次作业 利用Canvas画三维中的三角形并使用超采样实现抗锯齿 最终完成功能 Canvas 原生API实现 ...
- canvas绘图API详解
canvas绘图API详解 1.context的状态 矩阵变换属性 当前剪辑区域 context的其他状态属性: strokeStyle, fillStyle, globalAlpha, lineWi ...
- html5 canvas常用api总结(三)--图像变换API
canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...
随机推荐
- python学习笔记(8)--random库的使用
伪随机数:采用梅森旋转算法生成的伪随机序列中元素 使用random库 一.基本随机函数 随机数需要一个种子,依据这个种子通过梅森旋转算法产生固定序列的随机数.seed(a=None) 初始化给定的随 ...
- 关于jenkins旧的构建导致磁盘空间不足问题
简述: Jenkins在每一次的执行构建后,都会对该构建的项目生成一个历史构建记录以及生成一份历史构建的项目发布包,长期累积可能会占用大量磁盘空间 jenkins构建jobs路径如下图: 解决办法: ...
- Windows 10 安装PHP Manager 失败的解决办法
首先安装.NET 2.0和.NET 3.5, 在 控制面板----程序----启用或关闭Windows功能 里面 然后修改注册表:HKLM/System/CCS/Services/W3SVC/P ...
- 天虎云商wap和微信话项目总结
1:架构:以后要采用项目分模块的方式写代码了,不能写一个公用的controller包,每个模块分包,分别建立service,dao,但是模块同级的有个功能的baseDao, BaseSe ...
- SQL 函数NULLIF、NULL、ISNULL、COALESCE、IIF
NULLIF函数 NULLIF(Expression1,Expression2):给定两个参数Expression1和Expression2,如果两个参数相等,则返回NULL:否则就返回第一个参数. ...
- 学习 Spring (十一) 注解之 Spring 对 JSR 支持
Spring入门篇 学习笔记 @Resource Spring 还支持使用 JSR-250 中的 @Resource 注解的变量或 setter 方法 @Resource 有一个 name 属性,并且 ...
- poj-2001(字典树)
题意:给你一堆字符串,我们定义一个字符串可以被缩写成一个字符串(必须是原字符串的前缀),问你每个字符串能辨识的前缀是什么,不能辨识意思是(ab,abc我们缩写成ab): 解题思路:可以用字典树解决,我 ...
- no module named 'win32api'问题
运行scrapy时,报错no module named 'win32api' 解决办法: https://github.com/mhammond/pywin32/releases 下载对于python ...
- python数学库math模块
函数 数学表示 含义 .pi 圆周率π π的近似值,15位小数 .e 自然常数 e e的近似值,15位小数 ceil(x) [x] 对浮点数向上取整 floor(x) [x] 对浮点数向下取整 pow ...
- CSS初步学习
1.选择器: 如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器. id 选择器 id 选择器可以为标有特定 id 的 ...