HTML5标签除了增添绘图功能我们可以在网页中输出图片和动画外 ， 还可以为图片和动画元素添加一些属性 ， 来改变图片和场景样式 ， 如图片的变化效果等 ， 下面就让我们一起动手吧！工具/材料 dw等代码编辑软件
操作方法 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 【如何用H5改变图形样式】运行程序 ， 如图9（怎么样 ， 你看到小圆角了吗？）
文章插图
以上内容就是如何用H5改变图形样式的内容啦 ， 希望对你有所帮助哦！
推荐阅读
- WPS表格中如何设置图形为三维效果？
- 如何用protel99SE制作一个七段数码管（LED)？
- CAD2011中如何绘制“吊钩”
- Excel中如何将数字转换成日期
- 在CAD中如何执行偏移命令
- 如何用CATIA绘制杯子
- 如何安装斯维尔三维算量2014版
- 简笔画——如何利用电脑画图工具绘制蛋糕
- 自媒体如何快速涨粉
- 如何预防肝脏损害