学好Canvas,从简单开始。下面是一些Canvas入门最基本的实例分享：

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>demo</title>

     <script>

        window.onload= function pageLoad() {

             var canvas = document.getElementById('myCanvas');

             if (canvas.getContext) {

                 //绘图路径

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

                 ctx.beginPath();

                 ctx.moveTo(20, 20); // 设置路径起点，坐标为(20,20)

                 ctx.lineTo(200, 20); // 绘制一条到(200,20)的直线

                 ctx.lineWidth = 1.0; // 设置线宽

                 ctx.strokeStyle = "#CC0000"; // 设置线的颜色

                 ctx.stroke(); // 进行线的着色，这时整条线才变得可见

                 //绘制矩形

                 ctx.fillStyle = 'yellow';

                 ctx.fillRect(50, 50, 200, 100);

                 //绘制空心矩形

                 ctx.strokeRect(10,10,200,100);

                 //清除某个矩形区域的内容

                 ctx.clearRect(100,50,50,50);

                 //绘制文本

                 ctx.font = "Bold 20px Arial";

                 ctx.textAlign = "left";

                 ctx.fillStyle = "#008600";// 设置字体内容，以及在画布上的位置

                 ctx.fillText("Hello!", 10, 50);// 绘制空心字

                 ctx.strokeText("Hello!", 10, 100);

                 //绘制实心的圆形

                 //ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

                 //arc方法的x和y参数是圆心坐标，radius是半径，startAngle和endAngle则是扇形的起始角度和终止角度（以弧度表示），anticlockwise表示做图时应该逆时针画（true）还是顺时针画（false）

                 ctx.beginPath();

                 ctx.arc(60, 60, 50, 0, Math.PI*2, true);

                 ctx.fillStyle = "#000000";

                 ctx.fill();

                 //绘制空心圆形

                 ctx.beginPath();

                 ctx.arc(60, 60, 50, 0, Math.PI*2, true);

                 ctx.lineWidth = 1.0;

                 ctx.strokeStyle = "#000";

                 ctx.stroke();

                 //设置渐变色

                 //createLinearGradient方法的参数是(x1, y1, x2, y2)，其中x1和y1是起点坐标，x2和y2是终点坐标。通过不同的坐标值，可以生成从上至下、从左到右的渐变等等。

                 var myGradient = ctx.createLinearGradient(0, 0, 0, 160);

                 myGradient.addColorStop(0, "#BABABA");

                 myGradient.addColorStop(1, "#636363");

                 ctx.fillStyle = myGradient;

                 ctx.fillRect(10,10,200,100);

                 //设置阴影

                 ctx.shadowOffsetX = 10; // 设置水平位移

                 ctx.shadowOffsetY = 10; // 设置垂直位移

                 ctx.shadowBlur = 5; // 设置模糊度

                 ctx.shadowColor = "rgba(0,0,0,0.5)"; // 设置阴影颜色

                 ctx.fillStyle = "#CC0000";

                 ctx.fillRect(100,100,200,100);

                 //drawImage方法图像文件插入画布

                 var img = new Image();

                 img.src = "image.png";

                 ctx.drawImage(img, 0, 0); // 设置对应的图像对象，以及它在画布上的位置

             }

         }

     </script>

 </head>

 <body>

 <canvas id="myCanvas" width="400" height="500">

     您的浏览器不支持canvas！

 </canvas>

 </body>

 </html>

Canvas基本绘画学习的更多相关文章

  1. canvas的进阶 - 学习利用canvas做一个炫酷的倒计时功能

    先给大家贴一张图片,因为我不会上传视频(￣□￣||) ,请大家谅解了~  如果有知道怎么上传视频的大神还请指点指点 ^_^ ~ 然后看一下代码: html部分 :  <!DOCTYPE html ...

  2. Android——Canvas类的学习

    转:http://blog.sina.com.cn/s/blog_61ef49250100qw9x.html 今晚瞎折腾,闲着没事画了个机器人——android,浪费了一个晚上的时间.画这丫还真不容易 ...

  3. canvas实现绘画

    html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  4. HTML5 Canvas 颜色填充学习

    ---恢复内容开始--- 如果我们想要给图形上色,有两个重要的属性可以做到:fillStyle 和 strokeStyle. fillStyle = color strokeStyle = color ...

  5. Android绘图基础Paint和Canvas介绍-android学习之旅（六十一）

    canvas介绍 Paint类介绍 代码示例 效果图

  6. 决定整理一下canvas的基础学习

    好久没有用过canvas,都要忘完了.还是决定复习一下以前的笔记,以及整理一下笔记,以后好查阅

  7. Android Canvas设置绘画时重叠部分的处理模式【含效果图】

    在Android的PorterDuff.Mode类中列举了他们制定的规则: android.graphics.PorterDuff.Mode.SRC:只绘制源图像 android.graphics.P ...

  8. tkinter学习（4）frame、pack、canvas学习

    1.frame和pack学习 1.1 代码: import tkinter as tk window = tk.Tk() window.title('my window') window.geomet ...

  9. canvas游戏小试：画一个按方向键移动的圆点

    canvas游戏小试:画一个按方向键移动的圆点   自己对canvas,但又有一颗做游戏的心TT.然后记录一下对canvas的学习吧,用一个按方向键控制的小圆点来做练习.(编程时用了一些es6的语法) ...

随机推荐

  1. plsql developer点滴

    PLSql中查看编译错误的具体内容: 1. 打开Command Windows show errors procedure procedure_name 

  2. 优化EF的性能

    Entity Framework的性能优化: 1.使用MergeOption.NoTracking  (发现添加这个代码后, 导致"The object cannot be deleted ...

  3. selenium2获取input输入框中的值的三种方法。

  4. <正则吃饺子> ：关于微信支付的简单总结说明（二）

    关于微信退款 一.官方文档 申请退款:https://pay.weixin.qq.com/wiki/doc/api/app/app.php?chapter=9_4&index=6 二.退款流程 ...

  5. [poj1741]Tree(点分治+容斥原理)

    题意:求树中点对距离<=k的无序点对个数. 解题关键:树上点分治,这个分治并没有传统分治的合并过程,只是分成各个小问题,并将各个小问题的答案相加即可,也就是每层的复杂度并不在合并的过程,是在每层 ...

  6. MVN&nbsp;命令行

    Maven依赖查询: http://mvnrepository.com/ Maven常用命令:  1. 创建Maven的普通java项目:     mvn archetype:create     - ...

  7. Windows server 2003+IIS6+PHP5.3 以上的安装配置

    一.安装好IIS 具体安装方法可查看:http://down.chinaz.com/server/201102/11_1.htm. 二.下载并安装IIS FastCGI 下载地址:http://www ...

  8. 《精通Spring4.X企业应用开发实战》读后感第一章

    Rod Johnson在2002年,编写了interface21框架,spring就是基于此.Spring于2004年3月24日发布了1.0 Spring遵循的理念“”好的设计优于具体实现,代码应易于 ...

  9. linux忘记登陆密码的两种破解办法

    对于使用grub引导的linux系统.在开机自检后,出现grub引导界面时,按E键进入编辑模式,如下图所示:   把光标移到带有“kernel”字样的那一行,然后按E键编辑,如图:   在末尾按一个空 ...

  10. 利用JS函数制作时钟运行程序

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