月度工作计划表canvas元素与img元素相似,但 " />

月度工作计划表canvas元素与img元素相似,但"/>
 首页 > 作文

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>

参考

Canvas的基本用法使用canvas来绘制图形

本文地址: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 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图