【第21期】观点:人工智能到底用 GPU?还是用 FPGA?

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) 举报

相关文章推荐

关于canvas(html5)的用法

关于绘图,加入数据大到需要统计学的话,就迫切的需要html5这样的新技术,需要绘图,其中有canvas,svg,vml等技术规范(这里我喜欢这么叫规范)。 关于学习的地方有很多: 推荐的是:火狐的...

三天学会HTML5——SVG和Canvas的使用

在第一天学习了HTML5的一些非常重要的基本知识,今天将进行更深层学习 首先来回顾第一天学习的内容,第一天学习了新标签,新控件,验

HTML5 Canvas和EaselJS入门(译)

HTML5中最受开发者期待的一项新特性莫过于Canvas(画布)元素了。Canvas元素提供了一个可以动态渲染图形和位图的位图画布。它非常类似于Flash中的Bitmap和BitmapData两个类。...

HTML 5 element

HTML 5 text element >> article, section, nav, aside are all section content. 所谓的section就是可以按照类似word outline风格的分层缩进视图。 但是目前在FF/Chrome都没有支持. 可以在此处体验: http://gsnedders.html5.org/outliner/ 'Untitle Section'表示其没有title,仅是warning信息. 主要是用来描述总结,概述或者类似的文本元素的,他们都hgroup的子元素。 英文的描述如下: The spec f

HTML5 Canvas 基础API和实例

开发HTML代码是一件简单的事情,一个文字编辑器,然后一个支持HTML5的浏览器即可(本人的浏览器是Firefox8.0.1)。了解HTML的朋友应该知道,HTML5中最让人兴奋的API是canvas...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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