如何用H5改变图形样式

HTML5标签除了增添绘图功能我们可以在网页中输出图片和动画外，还可以为图片和动画元素添加一些属性，来改变图片和场景样式，如图片的变化效果等，下面就让我们一起动手吧！

操作方法

  • 01

    先在HTML5页面主体里面添加一个<canvas>标签，定义一张画布（大小，背景颜色）代码如图1；

  • 02

    在html5的头部嵌入JS代码，并把画布加载到页当中去；如图2

  • 03

    运行程序，这样我们就可以看到一张刚才定义好的画布了，如图3

  • 04

    在起点为（50，50）至（200，400）的地方划一条斜线，颜色为红色，如图4

  • 05

    运行代码，这时候会发现，画布里面多了一条划线，如图5

  • 06

    在端点为（50，200）的地方在添加一条斜线，线的精细为10，如图6

  • 07

    运行程序，如图7

  • 08

    通过linejoin的三种属性“miter、round、bevel”可以把两条线的端点变为尖角、圆角、钝角，代码如图8（变为圆角）

  • 09

    运行程序，如图9（怎么样，你看到小圆角了吗？）

赞 (0)

相关推荐

  • 如何在Word2010文档中设置SmartArt图形样式

    如何在Word2010文档中设置SmartArt图形样式

    在Word2010文档中设置SmartArt图形样式的步骤如下所述: 第1步,打开Word2010文档窗口,选中SmartArt图形. 第2步,打开"SmartArt工具/设计"功 ...

  • Word2007:SmartArt图形样式的选择

    在前面,对Word2007中的SmartArt图形了解了位置.大孝文字环绕方式以及颜色的设置,而SmartArt图形样式,我们现在也来做个了解.在Word2007中,提供了多种样式,可以使SmartA ...

  • wps文字如何改变图形位置和大小

    wps文字改变图形位置和大小的方法: 单击选中此图形,图形外会出现8个控制点,可以拖动调节大小和位置,还有一个绿色的旋转柄,可以通过拖动调节旋转角度. 按住SHIFT同时鼠标左键按住此图形的右下角的控 ...

  • 在Word2007中如何添加并改变封面样式

      在Word2007中如何添加并改变封面样式 操作步骤 1.首先打开Word2007软件,单击"插入"按钮,在"页"区域选择"封面"选项组 ...

  • 怎么使用AI套索工具改变图形形状

    怎么使用AI套索工具改变图形形状

    AI是现在十分常用的一款矢量插画软件,有些新用户不知道怎么使用该软件套索工具改变图形形状,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步先打开电脑中的AI软件,接着按下[Ctrl ...

  • ai的图形样式在哪里（ai怎么添加图形样式）

    ai的图形样式在哪里（ai怎么添加图形样式）

    今天的AI基础教程,我们继续来讲解Illustrator"图形样式"的相关知识.今天,我们要讲的是图形样式的编辑.图形样式的编辑包括复制图形样式.删除图形样式.断开图形样式链接三种 ...

  • AutoCAD2014如何改变图形位置、大小

    AutoCAD2014如何改变图形位置.大小. 1.移动图形 01 在不改变对象的方向和大小的情况下,按照指定的角度和方向进行移动.在菜单栏依次选择[默认]>[修改]>[移动]选项. 02 ...

  • word2010如何设置线条默认的颜色粗细等图形样式

    介绍word2010如何设置线条默认的颜色粗细等图形样式,以供参考. 操作方法 01 word2010绘制线条时会采用默认的颜色和粗细样式. 02 如果想修改线条的默认样式,可以在点击选择画好的线条后 ...

  • AutoCAD2014如何改变图形颜色

    AutoCAD2014如何改变图形颜色. 操作方法 01 首先鼠标左键点击桌面的AutoCAD 2014 - 简体中文 (Simplified Chinese)快捷方式,运行软件. 02 接着先关闭欢 ...