H5学习笔记(三)--canvas绘制矩形、路径、曲线和变换

1、绘制矩形

笔记

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 : 直角

实例

    //拿到画布
    var canvas = document.querySelector("#test")
    if (canvas.getContext) {
   
      var ctx = canvas.getContext("2d")

      //先写样式
      ctx.fillStyle="deeppink"
      ctx.strokeStyle="pink"
      ctx.lineWidth=50
      ctx.lineJoin="bevel"
      // ctx.lineJoin="round"
      // ctx.lineJoin="miter"

      //注意不加单位
      //填充的矩形
      ctx.fillRect(0, 0, 100, 100)
      //带边框的矩形 
      //100  : 99.5 --- 100.5(99-101)
      //100.5: 100  --- 101
      ctx.strokeRect(100, 100, 100, 100)
      ctx.clearRect(100, 100, 100, 100)
    }

2、绘制路径

笔记

canvas绘制路径
	图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。

步骤
1.首先,你需要创建路径起始点。
2.然后你使用画图命令去画出路径
3.之后你把路径封闭。
4.一旦路径生成,你就能通过描边或填充路径区域来渲染图形。

绘制三角形
beginPath()
	新建一条路径,生成之后,图形绘制命令被指向到路径上准备生成路径。
	生成路
  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值