html 在控件表面画线,html5中Canvas的使用--画线和面

左手的ㄟ右手 2022-10-06 11:52 153阅读 0赞

我们知道canvas是画布，今天我们就来画布上面画线和面。

1.Html中的画布

Canvas 2D画线和面

canvas是HTML5中的元素，当没有设置宽度和高度的时候，canvas会初始化宽度为300像素和高度为150像素。该元素可以使用CSS来定义大小；如果在绘制时图像会伸缩以适应它的框架尺寸，那么CSS的尺寸与初始画布的比例不一致，会出现扭曲。

2.渲染上下文

canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。 元素有一个做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数，上下文的格式。对于2D图像而言你可以使用 CanvasRenderingContext2D。var canvas = document.getElementById('cv');

var ctx = canvas.getContext('2d');兼容性检查在不支持 标签的浏览器中如何展示替换内容。通过简单的测试getContext()方法的存在，脚本可以检查编程支持性。上面的代码片段现在变成了这个样子：

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

if (canvas.getContext)\{

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

// drawing code here

\} else \{

// canvas-unsupported code here

\}

3.画一个方块

获得了context，就好像获得了画笔，这时我们在画布上画下一个方块：ctx.fillStyle = "rgba(0, 0, 200, 0.5)";

ctx.fillRect (30, 30, 55, 50);

CanvasRenderingContext2D.fillRect() 是Canvas 2D API 绘制填充矩形的方法。矩形的起点在 (x, y) 位置，矩形的尺寸是 width 和 height ，fillStyle 属性决定矩形的样式。

4.画一条线

同理，画一条线也是调用ctx的方法：ctx.beginPath();

ctx.moveTo(0,0);

ctx.lineTo(100, 100);

ctx.stroke();

CanvasRenderingContext2D.stroke() 是 Canvas 2D API 使用非零环绕规则，根据当前的画线样式，绘制当前或已经存在的路径的方法。

发表评论取消回复

表情：

评论列表（有 0 条评论，153人围观）

还没有评论，来说两句吧...

相关阅读

相关 html5canvas中波浪线怎么画,html5 canvas画波浪

要实现这样的动画普通的CSS3是鞭长莫及了，只能使用Canvas。好在使用canvas也非常简单。 Step1. 新建一个画布()元素，并放在所有按钮和logo的下方以免遮

朴灿烈づ我的快乐病毒、/ 2022年10月12日 01:20/ 0 赞/ 31 阅读

相关 html 在控件表面画线,html5中Canvas的使用--画线和面

我们知道canvas是画布，今天我们就来画布上面画线和面。 1.Html中的画布 Canvas 2D画线和面 canvas是HTML5中的元素，当没有设置宽度和高度的时候

左手的ㄟ右手/ 2022年10月06日 11:52/ 0 赞/ 154 阅读

相关 html5 canvas 画直线,HTML5 Canvas画线技巧——实现绘制一个像素宽的细线

正统的HTML5 Canvas中如下代码复制代码代码如下: ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 10

男娘i/ 2022年10月05日 11:58/ 0 赞/ 247 阅读

相关 html5 canvas画云

使用函数画出天空的云层图像： ![云层][SouthEast]y 主要使用到的是数学的圆与弧度之间转换关系：代码如下

亦凉/ 2022年08月26日 12:21/ 0 赞/ 489 阅读

相关 HTML5中canvas画图之画圆形

利用canvas中的arc可以绘制圆形图案。函数原型为:context.arc(x,y,半径，开始角度，结束角度，是否逆时针旋转);所以可以通过修改开始角度和结束角度来绘制弧线

桃扇骨/ 2022年08月23日 05:51/ 0 赞/ 240 阅读

相关 html5＜canvas在画布上画视频和图片>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">

爱被打了一巴掌/ 2022年06月15日 07:25/ 0 赞/ 424 阅读

相关【html5每日练习】html5 canvas画线

现在网络最火的是html5，没有之一，虽然正式版还没有出，但咱们可以期待着在未来几年，html5会霸占了互联网，所以毫无疑问得加入到html5的学习之中，谁学得快，谁就有可能把

港控/mmm°/ 2022年06月13日 10:50/ 0 赞/ 259 阅读

相关基于HTML5 画布功能canvas的绘画板：画线、画圆、画矩形、橡皮、改变线条

写在前面试看链接： https://yyywwwqqq.coding.me/draw 项目下载地址：https://coding.net/u/yyyww

小灰灰/ 2022年06月13日 07:25/ 0 赞/ 333 阅读

相关画圆角 - HTML5 Canvas 作图

2、function DrawAOBArc(Canvas,A,O,B,Radius) 功能：[画圆角][Link 1] 参数：Radius：[圆角][Link 1]的大

冷不防/ 2021年12月05日 16:10/ 0 赞/ 395 阅读

相关 HTML中画分割线

使用hr标签实现画一条线 html代码： <html> <body> <p>hr 标签定义水平线：</p> <hr />

Love The Way You Lie/ 2021年09月17日 09:06/ 0 赞/ 796 阅读