1. 获取绘图上下文

　　var mycanvas = document.getElementById('mycanvas');

　　var context = mycanvas.getContext('2d');

2. 绘图函数

　　　　注：x = positionX y= position Y w = width h = height

　　　　绘制矩形:

　　　　　　strokeRect(x,y,w,h); -----边框矩形

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

　　　　清除区域:

　　　　　　clearRect(x,y,w,h);

　　　　绘制路径：

　　　　　　beginPath();清楚路径列表，每次绘制新的形状之前都要调用

　　　　　　moveTo();开始绘制的坐标

　　　　　　lineTo();绘制到哪里

　　　　　　closePath();关闭路径形成闭合的图形,如果不想形成闭合图形就不需要添加

　　　　　　stroke();执行描边,连线!!!!!!!!!!!!

　　　　　　strokeStyle = '(十六进制颜色值)或(颜色英文拼写)';  设置描边颜色

　　　　　　lineWidth();设置描边线条的粗细

　　　　　　fillStyle = '(十六进制颜色值)或(颜色英文拼写)'; 设置填充颜色

　　　　　　fill(); 执行填充

　　　　绘制弧形:

　　　　　　注：弧度 = 角度 * (Math.PI / 180)

　　　　　　arc(x,y,radius(半径),startAngle（起始弧度）,endAngle（终止弧度）,counterclockwise(是否逆时针绘制));

　　　　　　arcTo(x1,y1,x2,y2,ridius(弧的半径，半径小则离切线角越近));

　　　　　　

　　　　绘制2次贝塞尔曲线：

　　　　　　quadraticCurveTo(cpx(控制点坐标x),cpy（控制点坐标y）,x（末端点x）,y（末端点y）);

　　　　　　与moveTo();的起始点配合使用。

　　　　绘制三次贝塞尔曲线：

　　　　　　bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y); 有两个控制点，最后的x，y是结束点。

　　　　　　与moveTo();的起始点配合使用。

　　clip（）；定义遮罩层，只能显示遮罩层之间的内容

　　透明度：使用rgba（）；

　　线性渐变色：

　　　　var  grandient = createLinearGradient(startX,startY,endX,endY)　;定义渐变区间

　　　　grandient.addColorStop(0(比例),"blue");

　　　　grandient.addColorStop(0.5(比例),"red");

　　　　ctx.fillStyle = grandient;

　　　　ctx.fill();

　　放射渐变：

　　　　var g = createRadialGradient(x1,y1,r1,x2,y2,r2);　两个圆的相交区域为渐变区间

　　　　g.addColorStop();

　　　　……

　　　　ctx.fillStyle = g;

　　　　ctx.fill();

例子：绘制台球桌:

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

     <title></title>

     </head>

     <body style="text-align: center;">

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

     </body>

     <script type="text/javascript">

         var mycanvas = document.getElementById('mycanvas');

         var ctx = mycanvas.getContext('2d');

         ctx.beginPath();

         ctx.fillStyle = "#00ff00";

         ctx.fillRect(0,0,500,500);

         //绘制白球

         DrawWhiteTableBall(50,250,ctx);

         //绘制红球组

         DrawRedTableBall(300,250,ctx);

         DrawRedTableBall(335,230,ctx);

         DrawRedTableBall(335,270,ctx);

         DrawRedTableBall(370,210,ctx);

         DrawRedTableBall(370,250,ctx);

         DrawRedTableBall(370,290,ctx);

         DrawRedTableBall(405,190,ctx);

         DrawRedTableBall(405,230,ctx);

         DrawRedTableBall(405,270,ctx);

         DrawRedTableBall(405,310,ctx);

         function DrawRedTableBall(positionX,positionY,ctx){

             ctx.beginPath();

             ctx.arc(positionX,positionY,20,0,360*Math.PI/180,false);

             var g = ctx.createRadialGradient(positionX-4,positionY-4,5,positionX,positionY,20);

             g.addColorStop(0,"#ffffff");

             g.addColorStop(1,"#ff0000");

             ctx.fillStyle = g;

             // ctx.fillRect(positionX,positionY,positionX+20,positionY+20);

             ctx.fill();

         }

         function DrawWhiteTableBall(positionX,positionY,ctx){

             ctx.beginPath();

             ctx.arc(positionX,positionY,20,0,360*Math.PI/180,false);

             var g = ctx.createRadialGradient(positionX-4,positionY-4,5,positionX,positionY,20);

             g.addColorStop(0,"rgba(255,255,255,1)");

             g.addColorStop(1,"rgba(255,255,255,0.8)");

             ctx.fillStyle = g;

             ctx.fill();

             // ctx.fillRect(positionX,positionY,positionX+20,positionY+20);

         }

     </script>

 </html>

放射渐变的理论参考这个大佬的讲解，写的很清楚：

　　https://www.cnblogs.com/tianma3798/p/5895811.html

Html5 Canvas介绍的更多相关文章

  1. HTML5 Canvas（画布）实战编程初级篇：基本介绍和基础画布元素

    欢迎大家阅读HTML5 Canvas(画布)实战编程初级篇系列,在这个系列中,我们将介绍最简单的HTML5画布编程.包括: 画布元素 绘制直线 绘制曲线 绘制路径 绘制图形 绘制颜色,渐变和图案 绘制 ...

  2. 介绍4种HTML5 Canvas库

    1.bHive.js Library http://www.bhivecanvas.com/ bHive能创建丰富的用户体验.动画.游戏,能够使开发更简单. demo: http://www.bhiv ...

  3. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  4. 赠书：HTML5 Canvas 2d 编程必读的两本经典

    赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...

  5. html5 canvas常用api总结(一)

    1.监听浏览器加载事件. window.addEventListener("load",eventWindowLoaded,false); load事件在html页面加载结束时发生 ...

  6. HTML5 Canvas绘制转盘抽奖

    新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...

  7. 简介 jCanvas：当 jQuery遇上HTML5 Canvas

    https://github.com/caleb531/jcanvas HTML5 可以直接在你的网页中使用 <canvas> 元素及其相关的 JavaScript API绘制的图形. 在 ...

  8. HTML5 CANVAS 实现图片压缩和裁切

    原文地址:http://leonshi.com/2015/10/31/html5-canvas-image-compress-crop/?utm_source=tuicool&utm_medi ...

  9. 如何使用 HTML5 Canvas 制作水波纹效果

    今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...

随机推荐

  1. css 四周边框角加粗效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Web前端-Ajax基础技术(下)

    Web前端-Ajax基础技术(下) 你要明白ajax是什么,怎么使用? ajax,web程序是将信息放入公共的服务器,让所有网络用户可以通过浏览器进行访问. 浏览器发送请求,获取服务器的数据: 地址栏 ...

  3. 年末展望：Oracle 对 JDK收费和.NET Core 给我们的机遇

    2018年就结束了,马上就要迎来2019年,这一年很不平凡,中美贸易战还在继续,IT互联网发生急剧变化,大量互联网公司开始裁员,微软的市值在不断上升 ,在互联网公司的市值下跌过程中爬到了第一的位置,我 ...

  4. 关于：未能加载文件或程序集“ICSharpCode.SharpZipLib”或它的某一个依赖项异常的解决方案

    问题: 今天项目迁移忽然又个ICSharpCode.SharpZipLib.dll 程序包丢失了,于是我在网上下载一个这样的包,结果程序运行就提示:未能加载文件或程序集“ICSharpCode.Sha ...

  5. java jdk动态代理模式举例浅析

    代理模式概述 代理模式是为了提供额外或不同的操作,而插入的用来替代”实际”对象的对象,这些操作涉及到与”实际”对象的通信,因此代理通常充当中间人角色. java中常用的动态代理模式为jdk动态代理和c ...

  6. Struts自动装配和四种放入Session作用域的方式

    ---恢复内容开始--- Struts三种自动装配的方式 第一种在Action类中定义和表单name相同的成员变量. 首先你定义一个Action类 页面: 第二种把成员变量提取到一个类中,  在Act ...

  7. mac-os安装autojump

    一 概念 autojump是一个命令行工具,它可以使用快捷命令,直接跳转到配置好的目录,而不用管现在身在何处,依赖zsh. 一 安装 安装zsh:sh -c "$(curl -fsSL ht ...

  8. AI - 深度学习之美十四章-概念摘要（8~14）

    原文链接:https://yq.aliyun.com/topic/111 本文是对原文内容中部分概念的摘取记录,可能有轻微改动,但不影响原文表达. 08 - BP算法双向传,链式求导最缠绵 反向传播( ...

  9. Jason Wang:记录自己所想所得（第一次作业）

    这个作业属于哪个课程 <课程的链接> 这个作业要求在哪里 <作业要求的链接> 我在这个课程的目标是 学会现代软件工程的思想,运用到实际中去 这个作业在哪个具体方面帮助我实现目标 ...

  10. 禁用 Chrome 的黑色模式/Dark Mode

    macOS Mojave 中引入了系统层面的黑色模式,Chrome 73 在应用中支行了这一模式,即系统设置为黑色模式时,Chrome 会自动适应切换到 Dark Mode. Chrome 跟随系统设 ...