canva基本使用和绘制矩形

1:canvas元素及基本定义与使用;

<canvas id="test" width="400" height="400"></canvas>

if(test.getContext) //判断是否有画笔

{

var cdx = test.getContext("2d");//代表2d绘图

}

2:###canvas绘制矩形

HTML中的元素canvas只支持一种原生的图形绘制:矩形。所有其他的图形的绘制都至少需要生成一条路径

1.绘制矩形

canvas提供了三种方法绘制矩形:

---->绘制一个填充的矩形(填充色默认为黑色)

fillRect(x, y, width, height)

---->绘制一个矩形的边框(默认边框为:一像素实心黑色)

strokeRect(x, y, width, height)

---->清除指定矩形区域,让清除部分完全透明。

clearRect(x, y, width, height)

x与y指定了在canvas画布上所绘制的矩形的左上角(相对于原点)的坐标。

width和height设置矩形的尺寸。(存在边框的话,边框会在width上占据一个边框的宽度,height同理)

2.strokeRect时,边框像素渲染问题

按理渲染出的边框应该是1px的,

canvas在渲染矩形边框时,边框宽度是平均分在偏移位置的两侧。

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

:边框会渲染在10.5 和 9.5之间,浏览器是不会让一个像素只用自己的一半的

相当于边框会渲染在9到11之间

context.strokeRect(10.5,10.5,50,50)

:边框会渲染在10到11之间

3.添加样式和颜色

fillStyle   :设置图形的填充颜色。

strokeStyle :设置图形轮廓的颜色。

默认情况下,线条和填充颜色都是黑色(CSS 颜色值 #000000)

lineWidth : 这个属性设置当前绘线的粗细。属性值必须为正数。

描述线段宽度的数字。 0、 负数、 Infinity 和 NaN 会被忽略。

默认值是1.0。

4.lineWidth & 覆盖渲染

5.lineJoin

设定线条与线条间接合处的样式(默认是 miter)

round : 圆角

bevel : 斜角

miter : 直角

<script type="text/javascript">

//

window.onload=function(){

//querySelector

//拿到画布

var canvas = document.querySelector("#test");

if(canvas.getContext){

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

ctx.fillStyle="deeppink";

ctx.strokeStyle="pink";

ctx.lineWidth=25;

ctx.lineJoin="round";

//注意不加单位

//填充的矩形

//带边框的矩形

// 100      : 99.5 --- 100.5(99-101)

// 100.5: 100  --- 101

ctx.strokeRect(100,100,100,100)

ctx.fillRect(0,0,100,100)

//                              ctx.clearRect(100,100,100,100)

}

}

</script>

//画布的高宽问题:画布的高宽在元素中指定,不要用CSS指定,CSS指定会出现问题

原文地址:https://www.cnblogs.com/love-life-insist/p/9136579.html

时间: 2024-11-09 13:37:59

canva基本使用和绘制矩形的相关文章

html5 canvas绘制矩形和圆形

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

绘制矩形

1.与矩形有关的方法:fillRect()    strokeRect()   clearRect()  这三个方法都能接受四个参数:矩形的x坐标,矩形的y坐标,矩形的宽度和矩形的高度:单位都是像素 2 //绘制红色矩形.   填充为红色:从点(10,10)开始绘制矩形,宽和高均为50像素, context.fillStyle="#ff0000"; context.fillRect(10,10,50,50); //绘制蓝色矩形 然后填充被设置成了半透明的蓝色  从点(30,30)开始绘

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,

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