码迷,mamicode.com
首页 > Web开发 > 详细

html5复习--canvas

时间:2019-03-13 00:13:51      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:属性   需要   text   画布   绘制   支持   照片   实时   返回   

一、简介

<canvas>是html5新增的标签,可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处理和渲染。

Canvas是由HTML代码配合高度和宽度属性而定义出的可绘制区域。JavaScript代码可以访问该区域,类似于其他通用的二维API,通过一套完整的绘图函数来动态生成图形。

二、<canvas>基本使用

 1、元素 

 

<canvas id="myCanvas" width="300" height="300">浏览器不支持则显示此文本</canvas>

 

需要设置宽高,即width 和height。不设置默认width 300, height 150,单位是px,可以不加单位,只写数字。不要用css设置canvas大小。

2、上下文

 canvas是只是一个元素,规定了画布的大小,还可以添加class规定canvas的位置等;本身并没有绘图能力,绘制工作需要JavaScript来完成。

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

.getContext(contextType),contextType是上下文类型,2d即2d上下文,有其他值。getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。

 

html5复习--canvas

标签:属性   需要   text   画布   绘制   支持   照片   实时   返回   

原文地址:https://www.cnblogs.com/kuhnTseng/p/10518455.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!