学好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. 关于pyspark

    http://spark.apache.org/ 官网,下载tar包 解压缩到本地: 设置环境变量,把%Spark解压缩路径%/bin放入到PATH变量中:(可以考虑设置一个SPARK_HOME) 在 ...

  2. request实现请求转发

    ServletContext可以实现请求转发,request也可以. 在forward之前输入到response缓冲区中的数据,如果已经被发送到了客户端,forward将失败,抛出异常 在forwar ...

  3. Spring boot 2.0 学习

    Spring boot 2.0出来了,支持java 9, 好多新特性,应该学习.   待续... ...

  4. John 尼姆博弈

    John Little John is playing very funny game with his younger brother. There is one big box filled wi ...

  5. JAVA企业级开发-BOM&DOM(03)

    一.BOM对象介绍 BOM对象:Browser Object Model 浏览器对象模型.把整个浏览器当做一个对象来处理. 一个浏览器对象中又包含了其他的对象. 重点介绍:window.history ...

  6. Swoole HTTP 的应用

    目录 概述 代码 小结 扩展 概述 这是关于 Swoole 学习的第四篇文章:Swoole HTTP 的应用. 第三篇:Swoole WebSocket 的应用 第二篇:Swoole Task 的应用 ...

  7. JavaScript中两个数组的拼接

    方法一:使用for循环 var arr = ['tom', 'jerry']; var arr2 = [1, 2]; for(var i=0; i<arr2.length; i++){ arr. ...

  8. SPOJ IAPCR2F 【并查集】

    思路: 利用并查集/DFS都可以处理连通问题. PS:注意Find()查找值和pre[]值的区别. #include<bits/stdc++.h> using namespace std; ...

  9. window安装android打包环境

    1.下载jdkhttp://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html下载:jdk-8u1 ...

  10. 【转】insert忽略重复、mysql插入操作跳过、插入覆盖覆盖、mysql更新重复

    需求背景:一般情况,插入数据的时候,有脏数据的情况,主键重复的话,直接insert into 会报错的,然后下面的sql都不再执行了,如果可以确定后面的数据可以覆盖前面的数据,直接用replace i ...