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小结的更多相关文章

  1. Canvas:技术小结

    Canvas:技术小结 资料 [教程:MDN官方中文教程] https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial [ ...

  2. Html5 学习系列(五)Canvas绘图API快速入门(2)

    Canvas绘图API Demos 上一篇文章中,笔者已经给大家演示了怎么快速用Canvas的API绘制一个矩形出来.接下里我会在本文中给各位介绍Canvas的其他API:绘制线条.绘制椭圆.绘制图片 ...

  3. Html5 学习系列(五)Canvas绘图API快速入门(1)

    引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...

  4. 引言:Canvas绘图API快速入门

    引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...

  5. Canvas createRadialGradient API

    Canvas createRadialGradient API <!DOCTYPE html> <html lang="en"> <head> ...

  6. HTML5之canvas基本API介绍及应用 1

    一.canvas的API: 1.颜色.样式和阴影: 2.线条样式属性和方法: 3.路径方法: 4.转换方法: 5.文本属性和方法: 6.像素操作方法和属性: 7.其他: drawImage:向画布上绘 ...

  7. Canvas原生API(纯CPU)计算并渲染三维图

    Canvas原生API(纯CPU)计算并渲染三维图 前端工程师学图形学:Games101 第三次作业 利用Canvas画三维中的三角形并使用超采样实现抗锯齿 最终完成功能 Canvas 原生API实现 ...

  8. canvas绘图API详解

    canvas绘图API详解 1.context的状态 矩阵变换属性 当前剪辑区域 context的其他状态属性: strokeStyle, fillStyle, globalAlpha, lineWi ...

  9. html5 canvas常用api总结(三)--图像变换API

    canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...

随机推荐

  1. python爬虫之pandas

    一.简介: Python Data Analysis Library 或 pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的.Pandas 纳入了大量库和一些标准的数据模 ...

  2. ASP.NET4.0所有网页指令

    ASP.NET网页指令(Page Directive)就是在网页开头的标签声明: <% Page Language="C#" %> 而指令的作用在于指定网页和用户控件编 ...

  3. layui内部使用jQuery

    layui是基于jQuery的框架,本身自带jQuery 根据官方推荐,是使用自带的好一点 这里记一下内部使用jQuery的方法: layui.use('jquery', function(){ va ...

  4. java 中 System

    package cn.zhou.com; /* * System 类 * * 不能实列化 * * long t=System.currentTimeMillis();//用于计算程序的执行时间! * ...

  5. TP5系统变量输出

    1.超全局变量 模板中: {$Think.sever.server_name}              //全部小写,输出blog.cn 控制器: $_SERVER['SERVER_NAME']  ...

  6. onkeyup+onafterpaste 只能输入数字和小数点--转载

    JS判断只能是数字和小数点 1.文本框只能输入数字代码(小数点也不能输入)<input onkeyup="this.value=this.value.replace(/\D/g,'') ...

  7. JS--dom对象:document object model文档对象模型

    dom对象:document object model文档对象模型 文档:超文本标记文档 html xml 对象:提供了属性和方法 模型:使用属性和方法操作超文本标记性文档 可以使用js里面的DOM提 ...

  8. vue 使用技巧总结 19.01

    组件中箭头函数的使用 不要使用箭头来定义任意生命周期钩子函数: 不要使用箭头来定义一个 methods 函数: 不要使用箭头来定义 computed 里的函数: 不要使用箭头定义 watch 里的函数 ...

  9. 学习 Spring (十三) AOP 配置

    Spring入门篇 学习笔记 Spring 所有的切面和通知器都必须放在一个 内(可以配置包含多个 元素),每一个 可以包含 pointcut, advisor 和 aspect 元素(它们必须按照这 ...

  10. gevent监测单线程下的io进行切换

    from gevent import monkey;monkey.patch_all() import gevent import time def eat(name): print('%s eat ...