欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

初识canvas--矩形绘制

程序员文章站 2022-07-02 11:39:56
一、canvas简介 ​  是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处理和渲染。 ​ 它最初由苹果内部使用自己MacOS X WebKit推出 ......

一、canvas简介

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

​ 它最初由苹果内部使用自己MacOS X WebKit推出,供应用程序使用像仪表盘的构件和 Safari 浏览器使用。 后来,有人通过Gecko内核的浏览器 (尤其是MozillaFirefox),OperaChrome和超文本网络应用技术工作组建议为下一代的网络技术使用该元素。

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

​ Mozilla 程序从 Gecko 1.8 (Firefox 1.5)开始支持 <canvas>, Internet Explorer 从IE9开始<canvas> 。Chrome和Opera 9+ 也支持 <canvas>;

二、Canvas基本使用

 <canvas>元素

<canvas id="tutorial" width="300" height="300"></canvas>

 

​ <canvas>看起来和<img>标签一样,只是 <canvas> 只有两个可选的属性 width、heigth 属性,而没有 src、alt 属性。

​ 如果不给<canvas>设置widht、height属性时,则默认 width为300、height为150,单位都是px。也可以使用css属性来设置宽高,但是如宽高属性和初始比例不一致,他会出现扭曲。所以,建议永远不要使用css属性来设置<canvas>的宽高。

替换内容

​ 由于某些较老的浏览器(尤其是IE9之前的IE浏览器)或者浏览器不支持HTML元素<canvas>,在这些浏览器上你应该总是能展示替代内容。

​ 支持<canvas>的浏览器会只渲染<canvas>标签,而忽略其中的替代内容。不支持 <canvas> 的浏览器则 会直接渲染替代内容。

1.用文本替换

<canvas>
    你的浏览器不支持canvas,请升级你的浏览器
</canvas>

2.用img替换

<canvas>
    <img src="./美女.jpg" alt=""> 
</canvas>

 

三 渲染上下文(Thre Rending Context)

​ <canvas>会创建一个固定大小的画布,会公开一个或多个 渲染上下文(画笔),使用 渲染上下文来绘制和处理要展示的内容。

​ 我们重点研究 2D渲染上下文。 其他的上下文我们暂不研究,比如, WebGL使用了基于OpenGL ES的3D上下文 (“experimental-webgl”) 。

var canvas = document.getElementById('tutorial');
//获得 2d 上下文对象
var ctx = canvas.getContext('2d');

 

2 检测支持性

var canvas = document.getElementById('tutorial');

if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

代码模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas矩形绘制</title>
</head>
<body>
    <canvas id="tutorial" width="300" height="300"></canvas>
    <script type="text/javascript">
        function draw() {
            var canvas = document.getElementById('tutorial');
            if(!canvas.getContext) return;
            var ctx = canvas.getContext('2d');

        }
        draw();
    </script>
</body>
</html>

 

 

四.绘制矩形

1,  绘制一个填充的矩形

1 fillRect(x, y, width, height) 
// 绘制一个背景色为rgb(200,0,0),原点为10,30 宽为55,高为55的矩形
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect(10,30,55,50);

 

2. 绘制一个矩形的边框

1 strockRect(x, y, width, height) 
// 绘制一个,原点为9,149 宽为82,高为的矩形边框
ctx.strokeRect(9,149,82,82);

 

 

3.   清除指定的矩形

clearRect(x, y, widh, height)