月度工作计划表canvas元素与img元素相似,但 " />
<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');
<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提供了三种方法绘制矩形
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>
本文地址:https://blog.csdn.net/sviptzk/article/details/108582508
本文发布于:2023-04-03 20:05:45,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/e76b6477f46cd91ac545051f85631eb8.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:Canvas学习记录.doc
本文 PDF 下载地址:Canvas学习记录.pdf
留言与评论(共有 0 条评论) |