html5 canvas element

原创 2016年05月31日 09:00:30

<canvas>标签定义图形,比如图表和其他图像。<canvas>只有两个属性--width和height(初始化width:300px;height:150px;)

<canvas>标签只是图形的容器,必须通过脚本来描述。

通过多种方法使用Canvas回执路径、盒、圆、字符以及添加图像

<canvas>有两种方式设置样式

一:通过style

二:通过JavaScript

CanvasRenderingContext2D接口提供的2D渲染上下文用来绘制<canvas>元素,为了获得这个接口的对象,需要在<canvas>上调用getContext(),并提供一个"2d"参数

var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
//一旦得到2D渲染上下文后,就可以像下面一样绘制:
ctx.fillStyle = rgb(200,0,0);
ctx.fillRect(10,10,55,50);

检查支持性

<span style="font-size:14px;">var canvas = document.getElementById("mycanvas");

if(canvas.getContext){
    var cxt = canvas.getContext('2d');
    //drawing code here
}else{
     // canvas-unsupported code here
}</span>
两个简单的骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<script>
    var CANVAS_WIDTH,CANVAS_HEIGHT;
    var myCanvas,cxt;

    window.onload = function(){
        createCanvas();
        drawFillRect();
    }
    function createCanvas(){
        document.body.innerHTML="<canvas id=\"myCanvas\" width=\""+CANVAS_WIDTH+"\" height=\""+CANVAS_HEIGHT+"\">"
        myCanvas = document.getElementById("myCanvas");
        if(myCanvas.getContext){
            cxt=myCanvas.getContext('2d');
        }
    }
    function drawFillRect(){
        cxt.fillStyle="brown";
        cxt.fillRect(10,10,100,100);
    }
</script>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<script>
    function drawFillRect(){
        var myCanvas = document.getElementById("myCanvas");
        if(myCanvas.getContext){
            var cxt = myCanvas.getContext('2d');
        }
        cxt.fillStyle="brown";
        cxt.fillRect(10,10,100,100);
    }
</script>
<body onload="drawFillRect()">
<canvas id="myCanvas" width="200" height="200"></canvas>
</body>
</html>

HTML canvas moveTo() Method

moveTo()方法把路径移动到话不中的指定点,不创建线条

HTML canvas lineTo() Method

lineTo()方法添加一个新点,然后创建从该店的话不最后指定的线条(该方法并不会创建线条)

绘制矩形

以下是3个绘制矩形的方法

CanvasRenderingContext2D.clearRect()   设置的区域内(以 点(x,y)为起点,范围是(width,height)所有像素变成透明,并擦除之前绘制的内容的方法)

语法:void ctx.clearRect(x,y,width,height);

参数:x (矩形起点的x轴坐标) y(矩形起点的y轴坐标)width(矩形的宽度)height(矩形的高度)

/**
 * Created by yana on 2016/5/30.
 */

var CANVAS_WIDTH = 200,CANVAS_HEIGHT=200;
var mycanvas, cxt;

window.onload=function(){
    createCanvas();
    drawClearRect();
}
function createCanvas(){
    document.body.innerHTML = "<canvas id=\"mycanvas\" width=\""+CANVAS_WIDTH+"\" height=\""+CANVAS_HEIGHT+"\">"
    mycanvas = document.getElementById("mycanvas");
    cxt = mycanvas.getContext("2d");
}

function drawClearRect(){
    cxt.beginPath();
    cxt.moveTo(10,10);
    cxt.lineTo(200,20);
    cxt.lineTo(0,150);
    cxt.closePath();
    cxt.stroke();
}

cxt.clearRect(0,0,100,100);

CanvasRenderingContext2D.fillRect()是Canvas 2D API 绘制填充矩形的方法。

语法:void ctx.fillRect(x,y,width,height);

/**
 * Created by yana on 2016/5/30.
 */
var CANVAS_WIDTH,CANVAS_HEIGHT;
var mycanvas,cxt;
window.onload=function(){
    createCanvas();
    drawFillRect();
}
function createCanvas(){
    document.body.innerHTML="<canvas id=\"mycanvas\" width=\""+CANVAS_WIDTH+"\" height=\""+CANVAS_HEIGHT+"\">"
    mycanvas =document.getElementById("mycanvas");
    cxt = mycanvas.getContext("2d");
}
function drawFillRect(){
    cxt.fillStyle="#00CCFF";
    cxt.fillRect(10,10,100,100);
}


版权声明:本文为博主原创文章,未经博主允许不得转载。详细代码(https://github.com/yana77)

html5 canvas 自定义画图裁剪图片

html5 给我们带来了极大惊喜的canvas标签,有了它我们可以在浏览器客户端处理图片,不需要经过服务器周转。可以实现: 1、照片本地处理,ps有的一些基本功能都有 2、结合js可以实现一些很炫...
  • taoerchun
  • taoerchun
  • 2015年09月16日 17:25
  • 3169

如何开发一个简单的HTML5 Canvas 小游戏

原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学。(如果你怀疑我的资历, ...
  • for_cxc
  • for_cxc
  • 2016年07月27日 13:31
  • 865

浅谈HTML5 canvas(一)

: HTML5添加的最受欢迎的功能就是元素,这个元素负责在页面中设定一个区域,然后就可以通过JavaScript动态在这个区域绘制图形。 主流浏览器都支持canvas,如IE9+、FireFox1.5...
  • zhouziyu2011
  • zhouziyu2011
  • 2017年03月24日 23:05
  • 710

HTML5中canvas画图之绘制数据图表

上一篇博文绘制了一个方格图,现在来绘制一个数据图表。实现的效果如下: 实现代码如下: 数据图表 //定义图表数据 var uriage=[80,92,101...
  • qq_25821067
  • qq_25821067
  • 2016年06月11日 22:38
  • 2755

html5 canvas自定义画板

html> head> meta charset="utf-8" /> head> body> 定义画板br /> canvas id="myCanvas" width="1200" heigh...
  • jbgtwang
  • jbgtwang
  • 2015年07月20日 09:03
  • 3181

html5 Canvas画图10:圆角矩形

本文属于《html5 Canvas画图系列教程》 上一篇文章我讲了画矩形和圆形的方法,他们都有原生的canvas绘图函数可完成。而本文讲的圆角矩形则只有通过其他方法模拟出来。 一个正常的圆角矩形,...
  • happyrabbit456
  • happyrabbit456
  • 2017年02月14日 15:34
  • 511

HTML5 Canvas八大核心技术及其API用法

什么是canvas? Canvas元素是HTML5的一部分,允许脚本语言动态渲染 位图像。Canvas由一个可绘制区域HTML代码中的属性定义高度和宽度(注:用其属性width和height设置...
  • hnh666666
  • hnh666666
  • 2015年12月10日 14:00
  • 857

HTML5 canvas绘图基本使用方法

本文介绍了html5 中canvas标签的基本使用方法,详细讲解了其重要的属性和方法...
  • u014607184
  • u014607184
  • 2016年06月26日 15:20
  • 33529

离屏Canvas——制作水印图片

您的浏览器尚不支持canvas 您的浏览器尚不支持canvas var canvas = document.get...
  • huangyibin628
  • huangyibin628
  • 2015年08月24日 15:01
  • 2206

HTML5中Canvas画线技巧大全

我们都知道在HTML5中最重要的亮点之一就是Canvas标签,他主要用途就是绘画,那么说到绘画技术,肯定就是要从画线开始,那么怎样使用canvas画线,canvas画线技巧是什么,下面为大家讲解can...
  • Sayesan
  • Sayesan
  • 2015年08月28日 16:47
  • 4018
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html5 canvas element
举报原因:
原因补充:

(最多只允许输入30个字)