学好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. 如何在kindle 3上无法进入 http://www.google.com/reader, 先登陆www.google.com， 然后选择阅读器。

    如何在kindle 3上无法进入 http://www.google.com/reader,  先登陆www.google.com, 然后选择阅读器.

  2. Ubuntu Java环境变量配置

    # java homeJAVA_HOME=/usr/local/jdk/jdk1.8.0_121JRE_HOME=JAVA_HOME/jreCLASSPATH=.:$JAVA_HOME/lib:$JR ...

  3. JAVA基础知识 String s = new String("ABC") VS String s = "abc"

    一:   String s = new String("ABC")  VS  String  s = "abc" String  s = "abc&q ...

  4. Java虚拟机学习 - 体系结构 内存模型（转载）

    一:Java技术体系模块图 二:JVM内存区域模型 1.方法区 也称"永久代” .“非堆”,  它用于存储虚拟机加载的类信息.常量.静态变量.是各个线程共享的内存区域.默认最小值为16MB, ...

  5. gSoap使用入门（2）----自定义接口头文件

    摘自:http://blog.csdn.net/zhuzhihai1988/article/details/8131556 接口头文件的格式在向导中没有看到明确的说明性的内容,但通过看开发包中示例程序 ...

  6. rpm 软件包

    rpm 软件包   Linux 中有安装软件方式有两种,源码安装以及软件包安装: 压缩包:源码包,编译后安装 rpm(redhat package manager 红帽软件包管理):需要编译,直接安装 ...

  7. 在element-ui的表格组件中为表头添加Tooltip 文字提示

    在使用表格组件的时候经常遇到的问题,列数很多,而表头的文字描述长度很长 <el-table-column v-if="!column.event" v-for="( ...

  8. es6常用方法

    一.let 和 constlet 声明变量,只在所在的块区有效,不存在变量提升:var 存在变 量提升const 声明常量,只在所在块区有效 二.变量的解构赋值1.数组的解构赋值let [a, b, ...

  9. 约数和问题 (codevs2606 && 洛谷2424)

    P2424 约数和 题目背景 Smart最近沉迷于对约数的研究中. 题目描述 对于一个数X,函数f(X)表示X所有约数的和.例如:f(6)=1+2+3+6=12.对于一个X,Smart可以很快的算出f ...

  10. Vue实现选项卡效果

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