Canvas学习记录

更新时间:2023-04-03 20:05:47 阅读：评论：0

Canvas的基本用法

canvas元素

<canvas id="tutorial" width="150" height="150"></canvas>月度工作计划表

canvas元素与img元素相似，但其没有src属性和alt属性。其只有两个属性width（默认值300像素）和height（默认值150像素）。如果没有为其设置宽度和高度时，那么将初始化为默认大小。

该元素可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。

id属性和class属性为所有HTML元素共有的，因此可以对canvas使用。

兼容性

替代内容

所谓替代内容也就是当浏览器无法正常显示canvas时用于替换的内容。

<!-- 初始宽度300像素 高度150像素 --><canvas id="stockGraph" width="150" height="150">    <!-- 当浏览器兼容canvas时不显示里面的内容，不兼容时则显示其内容 -->    current stock price: $3.15 +0.15</canvas>

编程性兼容

因为canvas是由js控制的，因此需要判断当前浏览器是否支持canvas。

var canvas = document.getElementById('stockGraph')// 判断当前浏览器是否兼容canvasif (canvas.getContext) {     // canvas被支持    var ctx = canvas.getContext('2d')    } el {         // canvas不被支持    }

渲染上下文

canvas元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。

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

一个简单的demo

<html>    <head>        <script type="application/javascript"> function draw() {  var canvas = document.getElementById("canvas"); if (canvas.getContext) {  var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); } } </script>    </head>    <body onload="draw();">        <canvas id="canvas" width="150" height="150"></canvas>    </body></html>

使用canvas来绘制图形

绘制矩形

canvas提供了三种方法绘制矩形

fillRect(x,y,width,height)

绘制一个填充的矩形

strokeRect(x,y,width,height)

绘制一个矩形的边框

clearRect(x,y,width,height)

x与y表示距页面左上角的距离

<html>   赵子昂简介 <head>        <script type="application/一处风景作文javascript"> function draw() {  var canvas = document.getElementById('canvas'); if (canvas.getContext) {  var ctx = canvas.getContext('2d'); /* (X,Y,width,height) */ // 绘制边长为100px的黑色正方形 ctx.fillRect(0, 0, 100, 100); // 从正方形的中心开始擦除了一个60*60px的正方形 ctx.clearRect(20, 20, 60, 60); // 在清除区域内生成一个50*50的正方形边框。 ctx.strokeRect(25, 25, 50, 50); } } </script>    </head>    <body onload="draw();">        <canvas id="canvas" width="150" height="150"></canvas>    </body></html>

绘制路径

绘制路径的基本步骤：

首先，你需要创建路径起始点。然后你使用画图命令去画出路径。之后你把路径封闭。一旦路径生成，你就能通过描边或填充路径区域来渲染图形。

所要用到的函数：

beginPath()

新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。

cloPath()

闭合路径之后图形绘制命令又重新指向到上下文中。

stroke()

通过线条来绘制图形轮廓。

fill()

通过填充路径的内容区域生成实心的图形。

移动笔触

moveTo(x,y)

将笔触移动到指定的坐标x以及y上。

对于这个函数可以想象一下在纸上作业，一支钢笔或者铅笔的笔尖从一个点到另一个点的移动过程。

当canvas初始化或者beginPath()调用后，你通常会使用moveTo()函数设置起点。我们也能够使用moveTo()绘制一些不连续的路径。

function draw() {   var canvas = document.getElementById('canvas');  if (canvas.getContext){     var ctx = canvas.getContext('2d');    ctx.beginPath();    ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制    ctx.moveTo(110, 75);    ctx.arc(75, 75, 35, 0, Math.PI, fal);   // 口(顺时针)    ctx.moveTo(65, 65);    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // 左眼    ctx.moveTo(95, 65);    ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // 右眼    ctx.stroke();  }}

线

lineTo(x,y)

绘制一条从当前位置到指定x以及y位置的直线。

圆弧

arc(x,y,radius,startAngle,endAngle,anticlockwi)

画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwi给定的方向（默认为顺时针）来生成。

该方法有六个参数：x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwi为一个布尔值。为true时，是逆时针方向，否则顺时针方向

arcTo

根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。

arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式:
弧度=(Math.PI/180)*角度。

<html><head>    <script type="application/javascript"> function draw() {  var canvas = document.getElementById('canvas'); if (canvas.getContext) {  var ctx = canvas.getContext('2d'); ctx.beginPath(); // 下半圆 ctx.arc(175, 75, 50, 0, Math.PI * 1, fal); // 上半圆 ctx.arc(75, 75, 生命中的三种人50,20年后的学校 0, Math.PI * 1, true); // 圆 ctx.arc(275, 75, 50, 0, Math.PI * 2, true) ctx.fill() } } </script></head><body onload="draw();">    <canvas id="canvas" width="850" height="150"></canvas></body></html>