Canvas基础知识(一)

miya 发布于2019-08-22 15:35 / 869人阅读

摘要：是新增的标签，是个图形容器。允许在其区域内进行绘制。其它大小由和决定。的创建标签只有和两个属性，在没有设置它们的情况下，默认大小为。只有一个参数，就是上下文的格式。下面的代码用于检测浏览器的是否支持支持不支持

canvas是Html5新增的标签，是个图形容器。允许JavaScript在其区域内进行绘制。其它大小由width和height决定。

canvas的创建

;
canvas标签只有width和height两个属性，在没有设置它们的情况下，canvas默认大小为300X150。同时，如果用css来设置canvas的大小会出问题，推荐直接在canvas标签里设置大小或者通过JavaScript来设置大小。

canvas能做什么？

动画

图形

游戏

字体

获得上下文

canvas只有获得上下文之后，才能在它的上面绘画。getContext()方法就是来获取上下文和绘画功能的。getContext()只有一个参数，就是上下文的格式。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

清空画布的方法

1.重设canvas的高度或者宽度：
由于canvas每当高度或宽度被重设时，画布内容就会被清空，因此可以用以下方法清空

function clearCanvas(){
    var canvas = document.getElementById("canvas");
    canvas.height=canvas.height;
    }

2.使用clearRect方法：

function clearCanvas(){
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0,0,canvas.width,canvas.height);
    }

3.可以用某一特定的颜色填充画布，从而到达清空的目的：

function clearCanvas()  
{  
    var canvas=document.getElementById("Canvas");  
    var ctx= canvas.getContext("2d");  
      
    cxt.fillStyle="#000000";  
    cxt.beginPath();  
    cxt.fillRect(0,0,c.width,c.height);  
    cxt.closePath();  
}

检查浏览器是否支持

最新版的 FireFox，Safari，Chrome 和 Opera 都支持 HTML5 canvas，但是 IE8及以下都不支持canvas。下面的代码用于检测浏览器的是否支持canvas
var canvas = document.getElementById("canvas");
if (canvas.getContext){

var ctx = canvas.getContext("2d");
// 支持

} else {

// 不支持

}

云服务器私有云 Canvas _canvas 2canvas android canvas

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93568.html

canvas基础知识点（一）

摘要：给设置宽高标签的宽高默认是是一个行内块元素可以在标签上通过，来设置可以在中给对象设置注意不要通过来调整的宽高导致内部的画布被拉伸，图形变形获取画笔工具绘图都是通过标签的画笔来进行的注意，不要写成，里面传入的参数目前也只有这一种情况描边和填充给canvas设置宽高： canvas标签的宽高默认是300*150,是一个行内块元素可以在canvas标签上通过width，height...

ephererid 2019-08-01 18:30 评论0 收藏0
【30分钟学完】canvas动画|游戏基础(2)：从零开始画画

摘要：前言上篇主要是理论的概述，本篇会多些实践，来讲讲的基础用法，并包含一些基础三角函数的应用，推荐没有基础的朋友阅读，熟悉的朋友可以跳过。完整实例一个会跟踪鼠标位置的箭头三角函数上下运动终于顺利过渡到三角函数的话题笑。前言上篇主要是理论的概述，本篇会多些实践，来讲讲canvas的基础用法，并包含一些基础三角函数的应用，推荐没有canvas基础的朋友阅读，熟悉的朋友可以跳过。本人能力...

anyway 2019-08-02 16:01 评论0 收藏0
【30分钟学完】canvas动画|游戏基础(2)：从零开始画画

摘要：前言上篇主要是理论的概述，本篇会多些实践，来讲讲的基础用法，并包含一些基础三角函数的应用，推荐没有基础的朋友阅读，熟悉的朋友可以跳过。完整实例一个会跟踪鼠标位置的箭头三角函数上下运动终于顺利过渡到三角函数的话题笑。前言上篇主要是理论的概述，本篇会多些实践，来讲讲canvas的基础用法，并包含一些基础三角函数的应用，推荐没有canvas基础的朋友阅读，熟悉的朋友可以跳过。本人能力...

Baoyuan 2019-08-22 15:42 评论0 收藏0