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. SharePoint 设置Lookup 字段的值

    如何设置Lookup字段的值, 首先我们同样需要了解SPFieldLookupValueCollection和SPFieldLookupValue, 这2个类的原理和之前所讲解到SPFieldUser ...

  2. 解决JsonFormat日期少一天问题

    使用Jackson的@JsonFormat注解时出现少一天 比如数据库存的日期是2015-01-05,转成json则变成了2015-01-04 解决办法: @JsonFormat(pattern=&q ...

  3. hadoop各版本下载

    http://hadoop.apache.org/ Download Hadoop from the release page. http://hadoop.apache.org/releases.h ...

  4. 【Java】Web 服务编程技巧与窍门: 在 UDDI 注册中心为 Web 服务注册开发 UDDI Java 应用程序

    本技巧建立了一个使用统一描述.发现和集成 (Universal Description, Discovery, and Integration,UDDI) 来注册应用程序级消费的 Web 服务实例.作 ...

  5. 离奇“undefined reference”错误分析与解决方案

    离奇“undefined reference”错误分析与解决方案 “undefined reference to XXX”是一类挺常见的链接错误,原因通常是链接时找不到声明成extern类型的函数的定 ...

  6. bzoj3230

    以前觉得这题好难,现在觉得这题还是挺简单首先看到类似LCP问题不难想到后缀数组吧前后的相似需要我们分别做一个后缀数组和“前缀数组”(就是把字符串反向然后跑后缀数组)这道题的难点就在于如何确定子串是什么 ...

  7. HDU 2255 奔小康赚大钱

    题目分析:这个是个KM的模板题. #include<stdio.h> #include<string.h> #include<algorithm> #include ...

  8. 测试使用wiz来发布blog

    晚上尝试了下用wiz写随笔并发布,貌似成功了,虽然操作体验和方便性上不如word,但起码它集成了这个简单的功能可以让我用:如果能让我自动新建blog文章并自动定时更新发布就完美了.2013年7月5日1 ...

  9. 2013年6月19日星期三java中函数地址值传递

    今天代码审核时确认了一个问题,理解了java中string和stringbuffer赋值问题,看到一个帖子很好,摘录如下: 理解这两个例子需要分清实参和形参的区别,引用和对象的区别 第一个例子的内部执 ...

  10. Majority Element II——LeetCode

    Given an integer array of size n, find all elements that appear more than ⌊ n/3 ⌋ times. The algorit ...