绘制矩形

1.与矩形有关的方法：fillRect() strokeRect() clearRect() 这三个方法都能接受四个参数:矩形的x坐标，矩形的y坐标，矩形的宽度和矩形的高度；单位都是像素

//绘制红色矩形. 填充为红色；从点（10,10）开始绘制矩形，宽和高均为50像素，

context.fillStyle="#ff0000";

context.fillRect(10,10,50,50);

//绘制蓝色矩形然后填充被设置成了半透明的蓝色从点（30,30）开始绘制，宽和高为50像素

context.fillStyle="rgba(0,0,255,0.5)";

context.fillRect(30,30,50,50);

//绘制红色描边矩形

context.strokeStyle="#ff0000";

context.strokeRect(10,10,50,50);

//绘制蓝色描边矩形

context.strokeStyle="rgba(0,0,255,0.5)";

context.strokeRect(30,30,50,50);

lineWidth;描边线条的粗细值可以是任意整数;

lineCap:控制线条末端的形状是平头，圆头，还是方头 “butt" "round" "square"

lineJoin:控制线条相交的方式是圆交，斜交，还是斜接 round bevel miter

4.context.clearRect(10,10,30,30) 从点（10,10）开始的宽30 高30 的矩形清除掉

时间： 2024-10-12 21:57:13

绘制矩形的相关文章

html5 canvas绘制矩形和圆形

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body onload="draw(),drawarc()">  <!--绘制其他复杂图

作者:卿笃军原文地址: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,

3. Quartz2D 绘制矩形、圆形、弧形

#pragma mark 绘制圆弧 -(void) drawArc:(CGContextRef)context{ //1.设置路径 /** 1)context 上下文 2)x,y 圆弧所在圆的中心点坐标 3)radius 半径 4)startAngle endAngle起始角度和截止角度,单位是弧度 0度对应圆的最右侧点 5)clockwise 顺时针或逆时针 */ CGContextAddArc(context, 160, 230, 100, -M_PI_2, M_PI_2, 1); //2

VB API 之第十一课绘制矩形

先来介绍几个画矩形的函数: DrawFocusRect():画一个焦点矩形:Rectangle():用当前选定的画笔描绘矩形,并用当前选定的画刷填充:DrawEdge():用指定的样式描绘一个矩形的边框:RoundRect():用当前选定的画笔画一个圆角矩形,并用当前选定的画刷填充. 今天用的是DrawFocusRect()函数,函数原型如下 Private Declare Function DrawFocusRect Lib "user32" Alias "DrawFocu

用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小案

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 id="fillRect" width="100" height=&qu