canvas的创建，canvas图片的绘制及图片的封装，矩形，矩形边框，圆，线的绘制。

JavaScript代码如下：main.js

/**

 * Created by zengkm on 15-9-1.

 */

    //初始化

var myworld=function(){

    console.log("输出一些东西");

    var canvas = document.getElementById("my_canvas");

    canvas.width="800";

    canvas.height="400";

    var context =canvas.getContext("2d");

    drawCanvas(context);

    for(var i=0;i<4;i++)

    {

        drawImg(context,"res/heh.png",200*i,50);

    }

}

//在canvas上绘图

var drawCanvas = function(ctx){

    //矩形绘制

    //参数：X坐标，Y坐标，宽，高

    ctx.fillStyle="#FFCC00";

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

    //矩形边框绘制

    //参数：X坐标，Y坐标，宽，高

    ctx.strokeStyle ="FF0000";

    ctx.strokeRect(400,150,100,100);

    //圆的绘制

    //参数：X坐标，Y坐标，圆周半径，起始弧度，结束弧度，圆弧绘制方向bool值

    ctx.arc(50,200,50,(Math.PI/180)*0,(Math.PI/180)*360,false);

    ctx.fill();//园的绘制填充

    //线的绘制

    ctx.fillStyle ="ff89a";

    ctx.linePath =5;

    ctx.beginPath();//标识开始绘制

    ctx.moveTo(700,200);

    ctx.lineTo(600,200);

    ctx.stroke();//线的填充绘制

    ctx.closePath();//关闭绘制

}

//canvas图片绘制

var drawImg = function(ctx,srcurl,x,y){

    var img = new Image();

    img.src =srcurl;

    img.onload = function(){

        //参数：img对象，X坐标，Y坐标

        ctx.drawImage(img,x,y);

    }

}

window.onload = myworld();

HTML代码：index.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>canvas实现</title>

</head>

<body>

<canvas id="my_canvas" style="background-color: green" width="400" height="200"></canvas>

<script style="text/javascript" src="src/main.js"></script>

</body>

</html>

最终实现的效果，画布颜色为绿色，第一行循环绘制图片4张，第二行画圆，矩形，矩形边框，线。

HTML5之canvas的更多相关文章

  1. 用html5的canvas画布绘制贝塞尔曲线

    查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  2. HTML5在canvas中绘制复杂形状附效果截图

    HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...

  3. HTML5之Canvas时钟(网页效果--每日一更)

    今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...

  4. HTML5 画布canvas元素

    HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...

  5. HTML5 之Canvas绘制太阳系

    <!DOCTYPE html> <html> <head> <title>HTML5_Canvas_SolarSystem</title> ...

  6. HTML5 中canvas支持触摸屏的签名面板

    1.前言 最近实在是太忙了,从国庆之后的辞职,在慢慢的找工作,到今天在现在的这家公司上班大半个月了,太多的心酸泪无以言表,面试过程中,见到的坑货公司是一家又一家,好几家公司自己都只是上一天班就走了,其 ...

  7. 【HTML5】Canvas画布

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  8. html5 之 canvas 相关知识(一)概念及定义

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  9. HTML5之Canvas画布

    先上代码: <canvas width="1000" height="800">浏览器不支持HTML5!</canvas> <sc ...

  10. HTML5之Canvas影片广场

    HTML5之Canvas影片广场 1.设计源代码 <!DOCTYPE html> <head> <meta charset="utf-8" /> ...

随机推荐

  1. const 笔记

    .指向const的指针例如:double a=1.01;const double * b=&a;*b=2.1; //这显然是错误的a=2.1; //这是正确的,a和*b的值都会变成2.01,有 ...

  2. iOS中MVC等设计模式详解

    iOS中MVC等设计模式详解 在iOS编程,利用设计模式可以大大提高你的开发效率,虽然在编写代码之初你需要花费较大时间把各种业务逻辑封装起来.(事实证明这是值得的!) 模型-视图-控制器(MVC)设计 ...

  3. 转:PHP的线程安全ZTS与非线程(NTS)安全版本的区别

    原文来自于:http://blog.sina.com.cn/s/blog_94c21e8f0101s2ic.html Windows版的PHP从版本5.2.1开始有Thread Safe(线程安全)和 ...

  4. http头

    http://hi.baidu.com/poplarshine/item/219bbef35f1d1d10d6ff8cf9 http://www.cnblogs.com/meil/archive/20 ...

  5. C 和 OC 字符串转换 NSString 和 char * 转换 const char* 与 char *

    #import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { char *s = "He ...

  6. java 动态代理深度学习(Proxy,InvocationHandler),含$Proxy0源码

    java 动态代理深度学习, 一.相关类及其方法: java.lang.reflect.Proxy,Proxy 提供用于创建动态代理类和实例的静态方法.newProxyInstance()返回一个指定 ...

  7. RPM常见用法

    rpm常见的用法: 命令 说明 rpm -i <.rpm file name> 安装指定的 .rpm 文件 rpm -U <.rpm file name> 用指定的.rpm文件 ...

  8. BZOJ1621: [Usaco2008 Open]Roads Around The Farm分岔路口

    1621: [Usaco2008 Open]Roads Around The Farm分岔路口 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 521  S ...

  9. 【Mongous】

    amark/mongous Mongous - 一个轻量级的nodejs mongodb驱动 mongous,是我不够懂你吗?关于mongous不支持objectId查询 mongous 不需要 _i ...

  10. 【模拟】ECNA 2015 I What's on the Grille? (Codeforces GYM 100825)

    题目链接: http://codeforces.com/gym/100825 题目大意: 栅栏密码.给定N(N<=10),密钥为一个N*N的矩阵,'.'代表空格可以看到,'X'代表被遮挡,还有密 ...