canvas绘制矩形

canvas绘制矩形

  1. 方法

    fillRect(x, y, width, height)           画一个实心的矩形
    clearRect(x, y, width, height)          清除一块儿矩形区域
    strokeRect(x, y, width, height)         画一个带边框的矩形
    rect(x, y, width, height)               直接画一个矩形
  2. 画一个矩形
    const canvas = document.getElementById(‘canvas‘);
    const ctx = canvas.getContext(‘2d‘);
    
    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  3. 画一个矩形(使用rect)
    ctx.rect(50,50,200,100);
    ctx.fill();

原文地址:https://www.cnblogs.com/ye-hcj/p/10356718.html

时间: 2024-11-07 21:18:35

canvas绘制矩形的相关文章

html5 canvas绘制矩形和圆形

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body onload="draw(),drawarc()"> <!--绘制的步骤:获取canvas元素->取得上下文->填充与绘制边框->设定绘图样式--> <!--绘制其他复杂图

Canvas 绘制矩形,圆形,不规则图形(线条),渐变等图像效果

绘制矩形: getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. fillStyle 方法将其染成红色,fillRect 方法规定了形状.位置和尺寸. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/cs

canvas 绘制 矩形 圆形

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title></head><body> <!-- canvas的width/height默认都是300 --> <canvas id="fillRect" width="100" height=&qu

HTML5—canvas绘制图形(1)

1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“画布”,我们可以利用js脚本在“画布”上绘制图形. 1.1canvas元素 在利用canvas绘制图形之前,我们首先需要在页面中放置一个canvas元素,如下代码: <canvas id="mycanvas" width="400" height="40

canva基本使用和绘制矩形

1:canvas元素及基本定义与使用: <canvas id="test" width="400" height="400"></canvas> if(test.getContext) //判断是否有画笔 { var cdx = test.getContext("2d");//代表2d绘图 } 2:###canvas绘制矩形 HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘

HTML5 在canvas中绘制矩形

作者:卿笃军 原文地址:http://blog.csdn.net/qingdujun/article/details/32930501 一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统,x坐标向右递增,y坐标向下递增. 使用绘图环境的矩形绘制函数来绘制矩形. fillRect(x,y,width,height) : 绘制一个实心的矩形. strokeRect(x,y,width,height) : 绘制一个空心的矩形. clearRect(x,y,width,height) : 清

[HTML5 Canvas学习]绘制矩形

1.使用strokeRect和fillRect方法绘制矩形 a.strokeRect是绘制一个不填充的矩形 b.fillRect是绘制一个填充的矩形 代码: <script> var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'); context.lineJoin = 'round'; context.lineWidth = 20; context.strokeRect(10, 10,

用canvas实现鼠标拖动绘制矩形框

需要用到jCanvas插件和jQuery. jCanvas下载:https://raw.githubusercontent.com/caleb531/jcanvas/master/jcanvas.min.js 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标拖动绘制矩形框(canvas)</ti

Canvas入门(1):绘制矩形、圆、直线、曲线等基本图形

来源:http://www.ido321.com/968.html 一.Canvas的基础知识 Canvas是HTML 5中新增的元素,专门用于绘制图形.canvas元素就相当于一块"画布",一块无色的透明区域.须要利用JavaScript编写在当中进行绘画的脚本. 在页面放置canvas元素非常easy.利用<canvas>标签.同一时候指定几个主要的属性:id,width和height.接下来通过几个小案例,跟我入门canvas吧~~~^_^~~~ 二.Canvas小案