学好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. PowerShell 总结

    PowerShell 总结 1. 2. 3. 参考学习资料 (1). PowerShell 在线教程 (2). 利用Powershell在IIS上自动化部署网站 视频教程: (3). Windows ...

  2. C# GUID使用总结

    全局唯一标识符(GUID,Globally Unique Identifier) What is GUID 也称作 UUID(Universally Unique IDentifier) . GUID ...

  3. Global 全局样式基本设置

    1.  默认字体设置,边距设置 html { font-family: sans-serif; /* 默认字体 */ font-size: 100%; /* 在用户调整窗口大小时,字体大小做相应调整. ...

  4. bootstrap 全局样式

    reset.css html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100% ...

  5. ambari快速安装hadoop

    资源下载http://www.cnblogs.com/bfmq/p/6027202.html 大家都知道hadoop包含很多的组件,虽然很多都是下载后解压简单配置下就可以用的,但是还是耐不住我是一个懒 ...

  6. wpf Datagrid 的全选

    在我的一个datagrid的一列中需要全选框,所以我在样式中是这样写的: <DataGridTemplateColumn.Header> <CheckBox> <i:In ...

  7. SynEdit(Delphi XE7)的安装和基本使用

    一.花絮 delphi自带的memo显示sql语句看的太累人了,今天决定美化一下.最起码要有“语法着色”.“显示行号”这2个功能. 意外发现了 SynEdit 控件. SynEdit是一个免费的文字编 ...

  8. SSE优化指令集编译错误: inlining failed in call to always_inline 'xxx': target specific option mismatch xxx

    在用QtCreator编译SSE优化指令的时候,出现了如下错误, inlining failed in call to always_inline '__m128i _mm_packus_epi32( ...

  9. Halcon - 获取图像数据（灰度值）

    在 Halcon 中,或许大部分人都知道如何通过 get_grayval 获取图像的灰度值,这条算子在获取单个像素时是比较好用的.但是当你想获取一幅大尺寸图像的一行甚至所有的灰度数据时,它就会变得很吃 ...

  10. day02-HTML(2)

    一.新知识 1.  !+tab   html5的标签结构   2.  Charset   编码 Ascll Ansi Unicode Gbk Gb2312 Big5 Utf-8   通用字符集 3.关 ...