学好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. Words Gems

    所有的东西都来自抄袭.来自学习.不同的是用新的方法做其他公司做过的事情.很多公司做同样的事情,但只有一家公司最成功.你要发现一个有需求的服务,并做得比别人更好,而不是比别人更早.

  2. 数据库和ADO

    数据库语言 数据库的简易流程(数据库客户端软件和数据库服务软件的执行流程) 主键的概念 如何创建主键 如何创建外键 主外键关系的概念以及使用 数据库的主要类型 数据库的主要数据类型 使用SQL语句来创 ...

  3. 11 Vue学习 headtop

    1: HeaderTop.vue : 面包屑:el-breadcrumb 定义面包屑, separator是分隔符.       el-breadcrumb-item: 是面包屑中用 分隔符 分开的多 ...

  4. Windows WMIC命令使用详解2

    Windows WMIC命令使用详解(附实例) https://blog.csdn.net/aflyeaglenku/article/details/77878525 第一次执行WMIC命令时,Win ...

  5. npm下载模块提速方法

    通过config配置指向国内镜像源,命令如下 npm config set registry https://registry.npm.taobao.org 然后可以查看是否配置成功 npm conf ...

  6. java&nbsp;Class类

    java Class类 Class类(在java.lang包中,Instances of the class Classrepresent classes and interfaces in a ru ...

  7. spring-boot-starter-data-redis学习笔记01

    1.Redis在Unbuntu14开启, 进入安装的src目录: 1.修改redis.conf,因为redis默认是受保护模式. protected-mode yes   (改为no) bind 12 ...

  8. C++ BYTE、WORD与DWORD类型

    在VS中,BYTE与WORD,DWORD本质上都是一种无符号整型,它们在WINDEF.H中被定义,定义如下: typedef unsigned char       BYTE;typedef unsi ...

  9. 2014-10-28 NOIP模拟赛

    Porble 1时间与空间之旅(tstrip.*) 题目描述 公元22××年,宇宙中最普遍的交通工具是spaceship.spaceship的出现使得星系之间的联系变得更为紧密,所以spaceship ...

  10. BZOJ2388:旅行规划（travel）——分块凸包

    题目 OIVillage 是一个风景秀美的乡村,为了更好的利用当地的旅游资源,吸引游客,推动经济发展,xkszltl 决定修建了一条铁路将当地 $n$ 个最著名的经典连接起来,让游客可以通过火车从铁路 ...