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. IIS短文件名漏洞修补方法之一改注册表一个注意项

    1)1.png 为漏洞存在没有做任何修复的时候的扫描 修复:2) 修改注册表键值: HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\FileSy ...

  2. 搭建一个 简易的php版 todolist

    我记得以前使用 wunderlist 但是国外..后来用了半年. 挺方便的.但是.后来慢慢忘了这工具存在 缺少了todolist.效率折半.. so.我搭建了个简单的todolist.  :mytin ...

  3. 整理的Java资源

    这里搜集了用来构建应用程序的工具. Apache Maven:Maven使用声明进行构建并进行依赖管理,偏向于使用约定而不是配置进行构建.Maven优于Apache Ant.后者采用了一种过程化的方式 ...

  4. couchdb and redis

    http://www.jdon.com/artichect/scalable5.html http://www.dedecms.com/knowledge/data-base/nosql/2012/0 ...

  5. Mashmokh and Tokens

    Codeforces Round #240 (Div. 2) B;http://codeforces.com/problemset/problem/415/B 题意:老板一天发x张代币券,员工能用它来 ...

  6. Leetcode：Repeated DNA Sequences详细题解

    题目 All DNA is composed of a series of nucleotides abbreviated as A, C, G, and T, for example: " ...

  7. java根据本地Ip获取mac地址

    import java.net.InetAddress; import java.net.NetworkInterface; import java.net.SocketException; impo ...

  8. 【HDOJ】3325 Arithmetically Challenged

    简单DFS. /* 3325 */ #include <iostream> #include <set> #include <cstdio> #include &l ...

  9. iOS应用架构浅谈

    (整理至http://www.cocoachina.com/ios/20150414/11557.html) 缘由 从事iOS工作一年多了,主要从事QQ钱包SDK开发和财付通app维护,随着对业务的慢 ...

  10. Windows7 搜索功能关闭了，怎么重新打开

    你的搜索功能被关闭了,打开cmd.exe,进入windows\system32输入OptionalFeatures.exe,里面有搜索功能选项,选择他.重新启动.